Angular model inheritance

by ramandv

HTML

<div ng-controller="MainCtrl">
     <p>Good {{timeOfDay}}, {{name}}!</p>
    <input type="text" ng-model="name" placeholder="Enter a name here"></input>
     <div ng-controller="ChildCtrl">
       <p>Good {{timeOfDay}}, {{name}}!</p>
       <input type="text" ng-model="name" placeholder="Enter a name here"></input>         
       <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
    </div>
</div>

JavaScript

function MainCtrl($scope) {
 $scope.timeOfDay = 'morning';
 $scope.name = 'Nikki';
}
 
function ChildCtrl($scope) {
 $scope.name = 'Mattie';
}
 
function BabyCtrl($scope) {
 $scope.timeOfDay = 'evening';
}