What is $scope and $rootScope ?
Last Updated :
12 Feb, 2022
$scope is a JavaScript object that refers to the application data. It has properties and methods attached to it that are available for both the view and the controller. So, we can say that $scope is the binding part between the HTML view and the JavaScript controller. The $scope has all the model data required to be displayed in the view.
AngularJS is an MVC based framework. MVC stands for Model View Controller. MVC is used to isolate the application logic from the user interface layer. The Model is responsible for maintaining the application data, the view for displaying the data to the user and the controller is the software code and is responsible for the interactions between the Model and the View. The scope is the model.
Approach:
While making a controller, pass the $scope object as an argument.
app.controller("myCrtl",function($scope){});Add properties to the $scope object inside the controller.
app.controller("myCrtl",function($scope){
$scope.name="GeeksforGeeks";
});
Copy the property value which you want to display using a binding expression.
<p> Name: {{name}}</p>
Example 1: Understanding the working of 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" ng-controller="myCtrl">
<h1>{{title}}</h1>
<label>Enter a number:</label>
<input type="number" min=0 ng-model="a">
<br><br>
<label>Enter a number:</label>
<input type="number" min=0 ng-model="b">
<br><br>
<button type="button" ng-click="add()">
Add
</button>
<p>Answer: {{answer}}</p>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.a = 0;
$scope.b = 0;
$scope.answer = 0;
$scope.title = "GeeksforGeeks";
$scope.add = function () {
$scope.answer = $scope.a + $scope.b;
};
});
</script>
</body>
</html>
Output:
Example 1
Explanation: In this example, there are various properties added to the scope in the controller “myCtrl”. When you add a property to the scope, the view gets access to these properties. The “title” property created in the scope is being accessed in the view using {{}}. Similarly, when you change the value of a property from the view it reflects in the scope as well. The value of the variables ‘a’, ’b’, and ‘answer’ was initially 0. When the user enters the two numbers and clicks on the “Add” button the value of ‘a’, ‘b’ and ‘answer’ change and is again reflected in the view.
Example 2: Working of scope with strings, objects, functions
In this example, in the script, we have made a module named “myApp”. We have added a controller to the module named “myCtrl”. In the controller we have added properties like a string, function, object to the $scope. The values of the properties are displayed in the view.
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" ng-controller="myCtrl">
<h1>{{title}}</h1>
<form>
<label>Enter first name: </label>
<input type="text" ng-model="firstname">
<br><br>
<label>Enter last name: </label>
<input type="text" ng-model="lastname">
</form>
<p>Name: {{name()}}</p>
<p>Courses:</p>
<ul ng-repeat="x in subjects.courses">
<li>{{x}}</li>
</ul>
<p>Tutorials:</p>
<ul ng-repeat="y in subjects.tutorials">
<li>{{y}}</li>
</ul>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.title = "GeeksforGeeks";
$scope.firstname = "";
$scope.lastname = "";
$scope.name = function () {
return $scope.firstname +
" " +
$scope.lastname;
};
$scope.subjects = {
courses: ["Live Courses",
"Self-Paced Courses",
"School Courses"],
tutorials: ["Practice DS and Algo.",
"Algorithms",
"Data Structure",
"Software Designs",
"CS Subjects"],
};
})
</script>
</body>
</html>
Output:
Example 2
The scope in AngularJS is hierarchical in nature: The $rootScope acts as a global variable. All the $scopes of an AngularJS application are children of the $rootscope. An app can have only one $rootScope. It is the scope that is created on the HTML element that contains the ng-app directive and is available in the entire application.
Example 3: Understanding the working of $scope and $rootScope.
In this example, on loading the app a property named message1 is created which belongs to the rootScope. We have also created a controller named “myCtrl” and we have added a property message2 to the 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>Message: {{message1}}</p>
<div ng-controller="myCtrl">
<p>Message: {{message1}}</p>
<p>Message: {{message2}}</p>
<p>Message: {{message4}}</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.run(function ($rootScope) {
$rootScope.message1 =
"This is rootScope message 1.";
$rootScope.message2 =
"This is rootScope message 2."
});
app.controller("myCtrl", function ($scope) {
$scope.message2 = "This is scope message 2.";
$scope.message4 = "This is scope message 4."
});
</script>
</body>
</html>
Output:
Example 3
Explanation: You can observe in the above example, that the properties belonging to rootScope are available to all the controllers. So, we can print "message1" which belongs to rootScope in the <div> element where the controller “myCtrl” is specified as rootScope is available in the entire application.
Whereas "message2" is specified in both rootScope as well as in scope. When the variable name is the same in scope and rootScope, the application uses the one in the current scope. Since in the <div> tag we have specified the controller “myCtrl”, it will use the value of "message2" specified in the scope.
We can say that $rootscope is available to all the controllers whereas $scope is available only to the controller that created it.
Similar Reads
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
4 min read
What is a Rootkit?
The term rootkit is derived from the words "root" and "kit." The phrases "root," "admin," "superuser," and "system admin" all refer to a user account with power of administration in an operating system. Meanwhile, "kit" refers to a collection of software tools. So, a rootkit is a collection of tools
11 min read
What is Local, Script and Global Scope in Node.js ?
In Node.js, scope determines the accessibility or visibility of variables, functions, and objects in some particular part of your code. The word scope means the extent to which we can use something. In programming variable scope means the extent to which we can use a variable within a program.In Jav
3 min read
What is Scope in Project Management?
Project scope refers to the detailed description of the deliverables, objectives, tasks, and goals that need to be achieved within a project. It describes the project's parameters, restrictions, and roles, outlining what is and isn't part of the project's work. Project scope, which essentially estab
7 min read
What is Variable Scope in JavaScript ?
Variable scope is the context of the program in which it can be accessed. In programming, a variable is a named storage location that holds data or a value. Think of it as a container that you can use to store and manipulate information in your code. Variables allow you to work with data in a flexib
4 min read
What is namespace in Typescript ?
In TypeScript, a namespace is a way to organize code logically and prevent naming conflicts between identifiers. It allows developers to group related functionalities, such as interfaces, classes, functions, and variables, within a dedicated scope.Namespaces are particularly useful for structuring l
3 min read
Why do we use $rootScope.$broadcast in AngularJS?
The $rootScope.$broadcast is used to broadcast a "global" event that can be caught by any listener of that particular scope. The descendant scopes can catch and handle this event by using $scope.$on.Syntax:$rootScope.$broadcast(name, args)$scope.$on(name, listener);Parameter value:listener: It is us
2 min read
What is a Parameterized pipe ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of an
3 min read
What is the use of $GLOBALS in PHP ?
In this article, we will discuss $GLOBALS in PHP. $GLOBALS is a superglobal variable used to access global variables from anywhere in the PHP program. PHP stores all global variables in an array called $GLOBALS[index]. Syntax: $GLOBALS['index']=value;value is the input value.The index is the unique
1 min read
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
5 min read