AngularJS - Prevent detaching models in child scope

voted: 2
model twitter-bootstrap angular

Model detachment is caused by the nature of inheritance in JavaScript. When you type something in child controller model the inherited variable will be overwritten. It can be easily fixed by using object variables. Check out the demo:

<!DOCTYPE html>
    <script src="//"></script>
    <link rel="stylesheet" href="">
    <meta charset="utf-8">
    <title>Prevent detaching models in child scope</title>
<body ng-app="myApp">
    <div ng-controller="FirstParentCtrl" class="bg-danger">
        <h1>Overwriting <small>(doesn't work)</small></h1>
        <h2>{{ title }}</h2>
        <input type="text" ng-model="title">
        <div ng-controller="FirstChildCtrl">
            <h3>{{ title }}</h3>
            <input type="text" ng-model="title">
    <div ng-controller="SecondParentCtrl" class="bg-success">
        <h1>Object variable <small>(works well)</small></h1>
        <h2>{{ obj.title }}</h2>
        <input type="text" ng-model="obj.title">
        <div ng-controller="SecondChildCtrl">
            <h3>{{ obj.title }}</h3>
            <input type="text" ng-model="obj.title">
working url:
version: AngularJS 1.3.x
Leave a Comment:
Characters left:
No comments yet.