title: Inheritance for scopes in AngularJS
body: <p>In a parent controller scope, I have defined <code>selectedItem</code> which is set to 'x'. Then in the child scope, I have defined <code>selectedItem</code> using ngModel:</p>
  
  <pre><code>&lt;div ng-app&gt;
    &lt;div ng-controller="CtrlA"&gt;
         &lt;div ng-controller="CtrlB"&gt;
           &lt;select ng-model="selectedItem" ng-options="item for item in items"&gt;
           &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  function CtrlA($scope) {
      $scope.selectedItem = 'x';
      $scope.items = ['x', 'y'];
  }
  
  function CtrlB($scope) {}
  </code></pre>
  
  <p>When the page is loaded, the <code>selectedItem</code> is properly set to 'x' as expected. When I select 'y', <code>selectedItem</code> in CtrlB $scope gives 'y' as expected.</p>
  
  <p>But when I inspect <code>$scope.selectedItem</code> in <code>CtrlA</code> scope (using AngularJS's batarang), it gives 'x' .</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/sudhh/GGKjp/2/" rel="nofollow">http://jsfiddle.net/sudhh/GGKjp/2/</a></p>
  
  <p>Preview page: <a href="http://fiddle.jshell.net/sudhh/GGKjp/2/show/light/" rel="nofollow">http://fiddle.jshell.net/sudhh/GGKjp/2/show/light/</a> (for inspecting with angularjs batarang)</p>
  
  <p>Why is <code>$scope.selectedItem</code> in <code>CtrlA</code> scope not getting updated to 'y'? What is the explanation?</p>
  
  <p>I prefer not to use events or <code>rootScope</code> to update <code>selectedItem</code> in parent scope (for learning purposes).</p>