Nested Controller using $scope

by DineshAngappa

HTML

<body ng-app="app" ng-controller="ParentController">
<div class="container">
  
  <div ng-controller="ChildController">
    {{$parent.firstName}}
    {{lastName}}
  </div>
</div>
</body>

JavaScript

angular.module("app", []);

angular.module("app").controller("ParentController", function($scope){
    $scope.firstName = "James";
    $scope.lastName = "Anderson";
});

angular.module("app").controller("ChildController", function($scope){
    $scope.firstName = "John";
});