Open In App

AngularJS | Scope

Last Updated : 23 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Scope in AngularJS is the binding part of HTML view and JavaScript controller. When you add properties into the scope object in the JavaScript controller, only then the HTML view gets access to those properties. There are two types of Scope in AngularJS. 
 

  • $Scope
  • $rootScope

Scope: There is few specific features in Scope those are listed below 
 

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

Syntax: 
 

$scope

Example 1: This example will illustrate the scope concept more clearly this example contain single scope. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
      AngularJS | Scope
    </title>
    <script src=
    </script>
</head>
 
<body>
 
    <div ng-app="gfg" ng-controller="control" align="center">
 
        <h1 style="color:green;">{{organization}}</h1>
        <p>A Computer Science Portal</p>
    </div>
 
    <script>
        var geeks = angular.module('gfg', []);
        geeks.controller('control', function($scope) {
            $scope.organization = "GeeksforGeeks";
        });
    </script>
 
</body>
 
</html>


Output: 
 

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

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        AngularJS | Scope
    </title>
    <script src=
    </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 = ["Python", "Machine Learning",
                               "Artificial Intelligence"];
        });
    </script>
 
</body>
 
</html>                   


Output: 
 

rootScope: If your variables contains the same name in the both rootscope and current scope then the controller or the application will use the current scope. 
Syntax: 
 

$rootScope

Example 3: This example will show you what will happen if the variable name is same in controller’s scope and the rootscope. 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        AngularJS | Scope
    </title>
    <script src=
    </script>
</head>
 
<body ng-app="gfg">
    <h1>GeeksforGeeks</h1>
    <p>Jack and Jones</p>
    <h3>{{relation}}</h3>
 
    <div ng-controller="control">
 
        <p>Akbar and Antony </p>
        <h3>{{relation}}</h3>
 
    </div>
 
    <p>Jay and Viru</p>
    <h3>{{relation}}</h3>
 
    <script>
        var geeks = angular.module('gfg', []);
        geeks.run(function($rootScope) {
            $rootScope.relation = 'friend';
        });
        geeks.controller('control', function($scope) {
            $scope.relation = "brothers";
        });
    </script>
 
</body>
 
</html>


Output: 
 

 



Previous Article
Next Article

Similar Reads

Explain Scope and Scope Chain in JavaScript
In this article, we will try to understand what is the scope of a variable as well as its function (or method). We will see what is a Scope Chain with the help of certain coding examples. ScopeScope in JavaScript determines the accessibility of variables and functions at various parts of one's code or program.In other words, Scope will help us to d
5 min read
What is scope in AngularJS ?
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 th
4 min read
How to use $scope.$apply() in AngularJS ?
In this article, we will be discussing the $apply() function &amp; how to use it in angularjs. In AngularJS, $apply() function is used to evaluate expressions outside of the AngularJS context (browser DOM Events, XHR). Moreover, $apply has $digest under its hood, which is ultimately called whenever $apply() is called to update the data bindings. We
3 min read
Explain AngularJS Scope Life-Cycle
In AngularJS, The Scope acts as a merging parameter between the HTML and Javascript code, ie, it is the binding part between view and controller and it is a built-in object. It is available for both the view and the controller. It is used to define inside the controller, in order to define the member variables. It has variables that are the applica
8 min read
How to remove an item from an array in AngularJS Scope?
In the AngularJS framework, we can manipulate the data that is within the scope, for example, we can perform the operations on an array by removing its elements. This helps us for better efficiency in developing the web application. We can remove the array elements in the applications like to-do list items, or the application that is used to displa
5 min read
How to access the Scope from outside JS Function in AngularJS ?
In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the application in response to user actions. In this ar
4 min read
What is the difference between '@' and '=' in directive scope in AngularJS ?
AngularJS is a popular JavaScript framework, that provides powerful features for building dynamic web applications. When creating custom directives in AngularJS, you may come across the need to define a scope for your directive. The two most common methods to do this are by using the @ and = symbols. These 2 symbols are used to describe the differe
4 min read
CSS :scope pseudo-class
A scope element forms a context for a block of styles. That element provides a reference point for selectors to be matched against. A scope element is defined using the scoped attribute. Styles declared with scoped attributes will be applied to all elements inside its parent element. Syntax: :scope Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;ht
1 min read
HTML | &lt;th&gt; scope Attribute
The HTML &lt;th&gt; scope Attribute is used to specify the header cell is used for header row, column, colgroup or rowgroup. This attribute does not display any visual effect on the browser but it is used for screen readers. Syntax: &lt;th scope="col | row | colgroup | rowgroup"&gt; Attribute Values: col: It specifies that the header cell is used f
1 min read
HTML | scope Attribute
The HTML scope Attribute is used to specify the header cell is used for the header row, column, colgroup or rowgroup. This attribute does not display any visual effect on the browser but it is used for screen readers.Uses: It is only used in &lt;th&gt; Element. Syntax: &lt;th scope="col | row | colgroup | rowgroup"&gt; Example: C/C++ Code &lt;!DOCT
1 min read