Articles → ANGULAR.JS → Nested Controllers In Angular.JS

Nested Controllers In Angular.JS






Nested Controllers




var app = angular.module('app', []);
app.controller('outer_controller', function($scope) {});
app.controller('inner_controller', function($scope) {});




<div ng-controller="outer_controller" ng-app="app"><div ng-controller="inner_controller" ng-app="app"></div></div>




var app = angular.module('app', []);
app.controller('outer_controller', function($scope) {
	$scope.name = "karan";
});
app.controller('inner_controller', function($scope) {});




<div ng-controller="outer_controller" ng-app="app"> {{name}}
	<div ng-controller="inner_controller" ng-app="app"> {{name}} </div></div>




Picture showing the output of the nested controller in angular.js

Click to Enlarge



<div ng-controller="outer_controller" ng-app="app"> {{name}}
	<input type="text" ng-model="name" /><div ng-controller="inner_controller" ng-app="app"> {{name}} </div></div>




Picture showing how the communication is done between the inner and outer controllers in angular.js

Click to Enlarge



<div ng-controller="outer_controller" ng-app="app"> {{name}}
	<div ng-controller="inner_controller" ng-app="app"><input type="text" ng-model="name" /> {{name}} </div></div>




Picture showing how the communication is done between the inner and outer controllers in angular.js

Click to Enlarge




Dot Notation




var app = angular.module('app', []);
app.controller('outer_controller', function($scope) {
	$scope.name = {
		first_name: "karan"
	};
});
app.controller('inner_controller', function($scope) {});




<div ng-controller="outer_controller" ng-app="app"> {{name.first_name}}
	<div ng-controller="inner_controller" ng-app="app"><input type="text" ng-model="name.first_name" /> {{name.first_name}} </div></div>





Posted By  -  Karan Gupta
 
Posted On  -  Sunday, October 11, 2015

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250