Scope Inheritance

Code

<div ng-app="scopeApp" ng-controller="ParentController">
  <p>Parent message: {{ message }}</p>
  <div ng-controller="ChildController">
    <p>Child sees parent: {{ message }}</p>
    <p>Child local: {{ childMsg }}</p>
    <button ng-click="updateParent()">Update Parent</button>
  </div>
</div>

<script>
angular.module('scopeApp', [])
.controller('ParentController', function($scope) {
  $scope.message = 'Hello from parent';
})
.controller('ChildController', function($scope) {
  $scope.childMsg = 'Hello from child';
  $scope.updateParent = function() {
    $scope.message = 'Updated by child';
  };
});
</script>

Explanation

Each ng-controller creates a child scope that prototypally inherits from its parent, so child templates can read parent properties. Writing to a primitive on the child creates a local copy that shadows the parent; to mutate the parent, write through an object or call a parent method. The $scope tree mirrors the DOM hierarchy.

More AngularJS Snippets