Questions And Answers

More Tutorials

Angular importance of scope

As Angular uses HTML to extend a web page and plain Javascript to add logic, it makes it easy to create a web page using ng-app, ng-controller and some built-in directives such as ng-if, ng-repeat, etc. With the new controllerAs syntax, newcomers to Angular users can attach functions and data to their controller instead of using $scope.

However, sooner or later, it is important to understand what exactly this $scope thing is. It will keep showing up in examples so it is important to have some understanding.

The good news is that it is a simple yet powerful concept.

When you create the following:

<div ng-app="myApp">
<h1>Hello {{ name }}</h1>

Where does name live?
The answer is that Angular creates a $rootScope object. This is simply a regular Javascript object and so name is a property on the $rootScope object:

angular.module("myApp", [])
 .run(function($rootScope) {
 $ = "World!";

And just as with global scope in Javascript, it's usually not such a good idea to add items to the global scope or $rootScope.

Of course, most of the time, we create a controller and put our required functionality into that controller. But when we create a controller, Angular does it's magic and creates a $scope object for that controller. This is sometimes referred to as the local scope.
So, creating the following controller:

<div ng-app="myApp">
 <div ng-controller="MyController">
 <h1>Hello {{ name }}</h1>

would allow the local scope to be accessible via the $scope parameter.

angular.module("myApp", [])
 .controller("MyController", function($scope) {
 $ = "Mr Local!";

A controller without a $scope parameter may simply not need it for some reason. But it is important to realize that, even with controllerAs syntax, the local scope exists.

As $scope is a JavaScript object, Angular magically sets it up to prototypically inherit from $rootScope. And as you can imagine, there can be a chain of scopes. For example, you could create a model in a parent controller and attach to it to the parent controller's scope as $scope.model.

Then via the prototype chain, a child controller could access that same model locally with $scope.model.

None of this is initially evident, as it's just Angular doing its magic in the background. But understanding $scope is an important step in getting to know how Angular works.


In this page (written and validated by ) you learned about AngularJS importance of scope . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Minification.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.