Hello Friends, In this tutorial, We are going to discuss $rooScope in Angular Js. Similar to $scope, $rootScope is also a JavaScript which is available for entire Angular Js application.

After completing this tutorial you will be able to understand:

  • $rootScope in Angular Js.

$rootScope in Angular Js:

As we have already discussed that $scope is specific to angular js controller. The rootScope is also a javascript object which is available for entire application.

If a property has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.


Let’s create an example of rootScope:

<!DOCTYPE html>



    <title>AngualrJS Controller</title>

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


<body ng-app="myApp">

    <div ng-controller="parentController">

        Controller Name: {{controllerName}} <br />

        Message: {{message}} <br />

        <div style="margin:10px 0 10px 20px;" ng-controller="childController">

            Controller Name: {{controllerName}} <br />

            Message: {{message}} <br />




        var myApp = angular.module('myApp', []);

        myApp.controller('parentController', function ($scope, $rootScope) {

            $scope.controllerName = "parentController";

            $rootScope.message = "Hello World!";


      myApp .controller('childController', function ($scope) {

            $scope.controllerName = "childController";






You can see the demo here.

View More:


I hope you understand this tutorial in Angular Js. I will appreciate your Feedback, Comments, and Suggestions.

Thank You.