Managing $scope inheritance

Scopes in AngularJS are bound to the same rules of prototypical inheritance as plain old JavaScript objects. When wielded properly, they can be used very effectively in your application, but there are some "gotchas" to be aware of that can be avoided by adhering to best practices.

Getting ready

Suppose that your application contained the following:

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function() {})

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl" ng-init="data=123">
    <input ng-model="data" />
    <div ng-controller="Ctrl">
      <input ng-model="data" />
    </div>
    <div ng-controller="Ctrl">
      <input ng-model="data" />
    </div>
  </div>
</div>

How to do it…

In the current setup, the $scope instances in the nested Ctrl instances will prototypically inherit from the parent Ctrl $scope. When the page is loaded, all three inputs will be filled with 123, and...