Scopes in AngularJS

April 16, 2016 by Mukesh Kumar at 3:47 pm

Unlike the other MVC frameworks, AngularJS doesn’t have specific classes or functions to create model objects. Instead, AngularJS extended the raw JavaScript objects with custom methods and properties to create object. These objects, also known as scope in AngularJS.

A scope is an object that glues the View with Controller. It holds the Model data that we pass to the View.

Every AngularJS application has at least one scope called $rootScope. This is created as a result of attaching the ng-app directive to any HTML element. That means whenever the AngularJS application is bootstrapped, a rootScope object is created.Each scope created by controllers, directives and services are prototypically inherited from rootScope.

All AngularJS apps have a $rootScope. The $rootScope is the top-most scope that is created on the DOM element that contains the ng-app directive. In other words,when your AngularJS bootstraps your app it creates a $rootScope for you. Next,when you attach ng-controller to any element, it creates a new child scope, which prototypally inherits from the $rootScope. Further, you can nest scopes by using an ng-controller directive inside another ng-controller.

A scope is an object that glues the View with Controller. It holds the Model data that we pass to the View.

In other words,when your AngularJS bootstraps your app it creates a $rootScope for you. Next,when you attach ng-controller to any element, it creates a new child scope, which prototypally inherits from the $rootScope. Further, you can nest scopes by using an ng-controller directive inside another ng-controller.

Consider the code snippet given below.


<div ng-app> <!-- creates a $rootScope -->
<div ng-controller="OuterController"> <!--creates a scope(call it scope 1) that inherits from $rootScope-->
<div ng-controller="InnerController"> <!-- Creates a child scope (call it scope 2) that inherits from scope 1-->
</div>
</div>
</div>

In the above code, $rootScope is the parent of all scopes therefore all the properties attached to $rootScope are implicitly available to scope 1. Similarly, scope 2 has access to all the properties attached to scope 1.

AngularJS : $rootScope and $scope Example

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS Scope Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
	
	<script>
	var app = angular.module('app', []);
	app.controller('CountryController', ['$scope', function($scope) {
		$scope.countryName = 'India';
		
}]);

	app.controller('StateController', ['$scope', function($scope) {
		$scope.stateName = 'Tamilnadu';
		
}]);

	app.controller('CityController', ['$scope', function($scope) {
		$scope.city = 'Chennai';
}]);

	</script>

	</head>
<body>
	<p>Scope Inheritance</p>
	<div ng-app="app" ng-controller="CountryController">
		Country Name : {{ countryName }}

		<div ng-controller="StateController">
		State Name : {{ stateName }} located in {{ countryName }}

			<div ng-controller="CityController">
			City Name : {{city }} located in {{ stateName }}, {{ countryName }}
			</div>
		</div>
	</div>
	
</body>
</html>

In the above code we have three controllers

CountryController - This is super controller and it has $rootScope.
StateController - the parent controller, child to the CountryController.
CityController - the child of StateController and grand child of CountryController.

The child controller(CityController) inherit the properties of CountryController as well as StateController. The parent controller(StateController) inherit the properties of super controller only.

The CityController is nested in StateController that is nested in CountryController.

Now see the result below. country Name is coming from CountryController,state name is coming from StateController and city name is coming from CityController.