What is Scope and RootScope in Angular JS? with examples

Scope

Scope is the binding part between the HTML (UI) and the Javascript (the Controller).
Scope object contains the available properties and methods.
Scope is accessible in both HTML and Javascript.

Scope Example


<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{ name }}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.name = "Coderz Heaven";
});
</script>

Root Scope

Root Scope is created on the HTML element that contains the ng-app directive
Root Scope is available for the entire application
If a variable is available in both rootScope and scope, then the application uses one in the current scope

Root Scope Example


<body ng-app="myApp">

<p>The rootScope's name :</p>
<h1>{{ name }}</h1>

<div ng-controller="myCtrl">
    <p>Name is : {{ name }}</p>
</div>

<p>The rootScope name is still {{ name }}</p>

<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
    $rootScope.name = 'Coderz';
});
app.controller('myCtrl', function($scope) {
    $scope.name = "Heaven";
});
</script>
</body>

So for the above example the final value for variable “name” is “Heaven” since it is in the current scope.

Leave a Reply Cancel reply