Ng-Controller-6

 
Ng-Controller-6
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> div.grand div { padding: 10px; border: solid 2px tomato; } </style> </head> <body ng-app="app"> <div class="container"><br /> <div class="grand"> <div ng-controller="MainController"> <p>{{call}}, {{name}} ! </p> <div ng-controller="ChildController"> <p>{{call}}, {{name}} !</p> <div ng-controller="GrandChildController"> <p>{{call}}, {{name}} !</p> </div> </div> </div> </div> </div> <script> var app = angular.module('app', []); app.controller('MainController', ['$scope', function ($scope) { $scope.call = 'Hello'; $scope.name = 'Grand father'; }]); app.controller('ChildController', ['$scope', function ($scope) { $scope.name = 'Father'; }]); app.controller('GrandChildController', ['$scope', function ($scope) { $scope.call = 'Hi'; $scope.name = 'Baby'; }]); </script> </body> </html>
Output