Root Scope

All applications have a $rootScope, which is the scope created on the HTML element containing the ng-app directive and is accessible throughout the entire application. If a variable has the same name in both the current scope and the $rootScope, the application prioritizes the variable in the current scope.

Example

A variable named “color” exists in both the controller’s scope and the $rootScope.

<body ng-app=”myApp”>
<p>The rootScope’s favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller=”myCtrl”>
  <p>The scope of the controller’s favorite color:</p>
  <h1>{{color}}</h1>
</div>
<p>The rootScope’s favorite color is still:</p>
<h1>{{color}}</h1>
<script>

var app = angular.module(‘myApp’, []);
app.run(function($rootScope) {
  $rootScope.color = ‘blue’;
});
app.controller(‘myCtrl’, function($scope) {
  $scope.color = “red”;
});

</script>
</body>