$rootscope in Angular.js

A $scope is an object in JavaScript that provides connectivity between controller and view. Angular $rootScope is the $scope. An application can have only one $rootScope in it and can be accessed across the application just like a global variable. In Angular $rootScope acts as parent scope and all other $scopes are child scopes. $rootScope objects update under particular controller $scope and not all controllers. All applications can have only one $rootScope and its lifecycle is the same as the app. Here is an example.

<!DOCTYPE html>

<html>


<head>

  <meta charset="utf-8" />

  <title>$rootScope vs $scope in AngularJs</title>

  <link rel="stylesheet" href="style.css" />

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>

  <script>

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


    //This is Ctrl1.

    app.controller('Ctrl1', ["$scope", "$rootScope", function($scope, $rootScope) {

      $scope.scopeMsg = 'This is $scope.';

      $rootScope.rootScopeMsg = 'This is $rootScope.';

    }]);


    //This is Ctrl2.

    app.controller('Ctrl2', ["$scope", "$rootScope", function($scope, $rootScope) {

      $scope.scopeMsg = $rootScope.rootScopeMsg;

    }]);

  </script>

</head>


<body ng-app="myApp">

  <h1>$rootScope vs $scope in AngularJs</h1>

  <div class="border" ng-controller="Ctrl1">

    <div>Result of Ctrl1 $scope : {{scopeMsg}}</div>

    <div>Result of Ctrl1 $rootScope : {{rootScopeMsg}}</div>

  </div>

  <br />

  <div class="border" ng-controller="Ctrl2">

    <div>Result of Ctrl2 $scope : {{scopeMsg}}</div>

  </div>

</body>


</html>


$Scope is created using ng-controller whereas $rootScope is created with ng-app.