(PCC)::[How-to-use-The-RootScope-in-AngularJS]::[angularjs]
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<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>
<p>Notice that controller's color variable does not overwrite the rootScope's color value.</p>
</body>
</html>
The rootScope's favorite color:
The scope of the controller's favorite color:
The rootScope's favorite color is still:
Notice that controller's color variable does not overwrite the rootScope's color value.