Skip to content
AngularJS

Scope Inheritance

Prototypal scope inheritance between parent and child controllers.

#angularjs#scope#inheritance

Code

angularjs
<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>