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