Articles → ANGULAR.JS → Nested controllers in angular.js

Nested controllers in angular.js

In this article, we will discuss nested controllers in angular.js and how to communicate between them.

Nested controllers

First of all create 2 controllers in angular.js

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

In the preceding code, I have not written anything. But will add a small piece of code inside it. Now make a nested controller inside the HTML code.

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

Add a variable inside the ‘outer_controller’, so the preceding code will be

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

In the preceding code, I have created a scope variable ‘name’ and assign the value ‘karan’. Now let us access this variable from both inner and outer controller.

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

Now run the application, you see that inner controller is able to access the scope variable defined in the outer controller.

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

Click to Enlarge

Now add a textbox and bind it with ‘name’. So the HTML code will be

<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>

Now run the application, you see that if the value in Textbox changes, then it impacts binding in both the controllers.

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

Click to Enlarge

Now move the textbox inside the inner controller, so the code will be

<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>

When you the run the preceding code, you see that when you are changing the value in Textbox, it only impacts the inner controller.

Click to Enlarge

This is because the inner controller is not looking up the hierarchy. This issue could be solved using the dot notation.

Dot notation

In dot notation, the scope variable is changed to an object. So the controller code is changed to.

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

And HTML code is changed to

<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>

Now if you run the application you could see that if you change the value in Textbox then it impacts both the controllers.

Posted By -	Karan Gupta

Posted On -	Sunday, October 11, 2015

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250