Difference Between $scope And $rootscope In AngularJS

In addition to the $scope object, I am injecting the $rootscope object and setting the root scope color property as shown below.

.controller("redColourController", function ($scope, $rootScope) {
    $scope.redColour = "Red Colour";
    $rootScope.rootScopeColour = "Root Scope Colour";
})

So, our final sciprt.js file code is.

/// <reference path="angular.min.js" />
var app = angular.module("Demo", [])
    .controller("redColourController", function ($scope, $rootScope) {
        $scope.redColour = "Red Colour";
        $rootScope.rootScopeColour = "Root Scope Colour";
    })
    .controller("greenColourController", function ($scope) {
        $scope.greenColour = "Green Colour";
    });

Now, include an HTML file in your application. I want redColourController to take charge of displaying the scope color. In order to do that, we will take a DIV element inside the body section, and in that, we will write as ng-controller and the redColourController name. We will display each property value.

So far, our HTML Code is,

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/script.js"></script>
</head>
<body>
    <div ng-controller="redColourController">
        Red Scope Colour:
        Red Colour Controller:
        Green Colour Controller:
    </div>
</body>
</html>

Now, copy the property value that we want to display and use a binding expression.

<div ng-controller="redColourController">
    Red Scope Colour: {{rootScopeColour}}
    Red Colour Controller: {{redColour}}
    Green Colour Controller: {{greenColour}}
</div>

Now, insert the same DIV code and make the greenColourController in charge to display the green color property value as well.

<div ng-controller="greenColourController">
    Red Scope Colour: {{rootScopeColour}} <br />
    Green Colour Controller: {{greenColour}} <br />
    Red Colour Controller: {{redColour}}
</div>

Save the changes and run your project.

Output

$rootscope color properties are available in both the div elements because that is defined in the $scope object.

Red Color Controller: {{redColour}} will be available for the red color controller and that’s why we see the output as Red Color,

But when you see the green color property which is defined on the $scope object, that property will not be available for the red color controller, that’s why in the output we don’t see any value for the green color controller, and the same scenario for the other div and the other red color controller.

Now, as there are no respective values for the various green and red color controllers, they appear to be blank. We will write green and red as undefined.

<span style="color:red" ng-show="greenColour == undefined">
    greenColour is undefined
</span>

Here, we have taken the span element for displaying the color as red. We will use the ng-show directive to display and will write one condition- If the green color is undefined and that condition is true, it will display the green color as undefined.

Similarly, we will do it for another div element too.

<span style="color:green" ng-show="redColour == undefined">
    redColour is undefined
</span>

So, our final View code is.

<!DOCTYPE html>
<html ng-app="Demo">
<head>
    <title></title>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/script.js"></script>
</head>
<body>
    <div ng-controller="redColourController">
        Red Scope Colour: {{rootScopeColour}} <br/>
        Red Colour Controller: {{redColour}} <br/>
        Green Colour Controller: 
        <span style="color:red" ng-show="greenColour == undefined">
            greenColour is undefined
        </span>
    </div>
    <br/>
    <div ng-controller="greenColourController">
        Red Scope Colour: {{rootScopeColour}} <br/>
        Green Colour Controller: {{greenColour}} <br/>
        Red Colour Controller: 
        <span style="color:green" ng-show="redColour == undefined">
            redColour is undefined
        </span>
    </div>
</body>
</html>

Now, let’s save these changes and reload the page.

Reload

As you can see, we got the value for the green and red color Controller.

Conclusion

This was all about the main difference between $scope and $rootscope object.

Hope this article was helpful!!

Difference Between $scope And $rootscope In AngularJS

Overview

Introduction

Conclusion