What is scope in AngularJS ?

Last Updated : 28 Jul, 2022

In this article, we will see what the scope is in AngularJS and how to use Scope, along with understanding its implementation through the examples.

The Scope in AngularJS is the binding part between HTML (view) and JavaScript (controller) and it is a built-in object. It contains application data and objects. It is available for both the view and the controller. It is an object with available properties and methods. There are two types of scopes in Angular JS.

$Scope
$rootScope

How to use the Scope?

When we make a controller in AngularJS, we will pass the $scope object as an argument. In AngularJS, it creates and injects a different $scope object into each controller in an application. Thus, the data and methods attached to $scope inside one controller cannot be accessed on another controller. Amidst the nested controller, the child controller will acquire the parent controller's scope object. Accordingly, the child controller can access properties added to the parent controller but the parent controller cannot access properties annexed to the child controller.

Understanding the Scope: If we see an AngularJS application that consists of:

The HTML view.
Model, the data which is available for the current view.
Controller, the JavaScript function that makes/changes/removes/controls the data.

The scope is the model and it is a JavaScript object with properties and methods which are available for both the view and the controller.

Example 1: In this example, we will see the use of the $scope object & will also see how data is transferred from the controller to the view component which is rendered by using interpolation.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="gfg" 
         ng-controller="myCtrl">
        <h1>{{organisation}}</h1>
    </div>
    <p>
        The property "organization" was made in 
        the controller, and can be referred to 
        in the view by using the {{ }} brackets.
    </p>
    <script>
        var geeks = angular.module("gfg", []);
        geeks.controller("myCtrl", function($scope) {
            $scope.organisation = "GeeksforGeeks";
        });
    </script>
</body>
</html>

Output:

Properties made by the controller can be referred to in the view.

Example 2: From the previous example, we have used only single scope, but for larger applications, which may be a section in the HTML DOM that can access certain scopes.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>AngularJS Scope</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <div ng-app="gfg" 
         ng-controller="control">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
    
    <script>
        var geeks = angular.module("gfg", []);
        geeks.controller("control", function($scope) {
            $scope.names = [
                "DSA Learning",
                "Algorithm Learning",
                "Web Technology",
            ];
        });
    </script>
</body>
</html>

Output:

In the above example, there is only one scope in the example below, you will see more than one scope.

Root Scope: Root scope is a scope that is created on the HTML element which has the ng-app directive & is contained in all the applications. The availability of root scope is in the whole application.

Example 3: If any variable is declared with the same name in the current scope & root scope then the current scope will be used by the application. In this example, we will see how the variable named "color" is used by the current scope.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body ng-app="myApp">
    <p>The rootScope's favorite color:</p>
    <h1>{{color}}</h1>
    <div ng-controller="myCtrl">
        <p>The scope of the controller's favorite color:</p>
        <h1>{{color}}</h1>
    </div>
    <p>The rootScope's favorite color is still:</p>
    <h1>{{color}}</h1>
    <p> 
        Note that the color variable in controller does
        not overwrite the color value in rootScope. 
    </p>
    <script>
        var app = angular.module("myApp", []);
        app.run(function($rootScope) {
            $rootScope.color = "turquoise";
        });
        app.controller("myCtrl", function($scope) {
            $scope.color = "salmon";
        });
    </script>
</body>
</html>