Nested Controller using ViewModel

by DineshAngappa

HTML

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

JavaScript

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

angular.module("app").controller("ParentController", function(){
    var vm = this;

    vm.firstName = "James";
    vm.lastName = "Anderson";
});

angular.module("app").controller("ChildController", function($scope){
    var vm = this;

    vm.firstName = "John";
});