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=
</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=
</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=
</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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...