AngularJS scope with nested controllers

Every part of an AngularJS application has a parent scope. At the ng-app level there is a scope called $rootscope.

All scopes have prototypal inheritance so they have access to their parent’s scope. Any property that cannot be found on the local scope will be looked for on the parent scopes until found;

Example:

app.controller('ParentController', function($scope){
  $scope.car = { wheels: 4}
});

app.controller('ChildController', function($scope){
  $scope.changeCar = function(){
    $scope.car.type = 'Ferrari';
    $scope.car.colour = 'Red';
  }
});

If we bind the child controller under the parent controller the child controller’s scope object will be the parent controller’s scope object. We can then add data to the parent controller’s $scope on the child scope. i.e.

<div ng-controller="ParentController">
  <div ng-controller="ChildController">
    <a ng-click="changeCar()">Change car</a>
    {{ car }}
  </div>
</div>

// outputs { wheels: 4, type = 'Ferrari', colour: 'Red'}

AngularJS scope with nested controllers