Difference between $scope and $rootScope

In this video we will discuss the difference between $scope and $rootScope. The main difference is that, $rootScope is available globally (for all controllers), whereas $scope is only available to the controller that has created it and it's children.

Let us understand this with an example.

Controller Code : We have 2 controllers (redColourController & greenColourController). redColourController has set redColour property on $scope and rootScopeColour on $rootScope. This means redColour property cannot be used outside the redColourController, where as rootScopeColour that is set on $rootScope can be used anywhere. greenColourController has set greenColour property on $scope. This means greenColour property cannot be used outside the greenColourController

var app = angular

.module("Demo", [])

.controller("redColourController", function ($scope, $rootScope) {

$rootScope.rootScopeColour = "I am Root Scope
Colour";

$scope.redColour = "I am Red Colour";

})

.controller("greenColourController", function ($scope) {

$scope.greenColour = "I am Green
Colour";

})

View HTML :

<divng-controller="redColourController">

Root Scope Colour : {{rootScopeColour}}<br/>

Red Colour Controller : {{redColour}}<br/>

Green Colour Controller :

<spanstyle="color:red"ng-show="greenColour ==
undefined">

greenColour is undefined

</span>

</div>

<br/>

<divng-controller="greenColourController">

Root Scope Colour : {{rootScopeColour}}<br/>

Green Colour Controller : {{greenColour}}<br/>

Red Colour Controller :

<spanstyle="color:red"ng-show="redColour ==
undefined">

redColour is undefined

</span>

</div>

Output : From the output it is clear that the rootScopeColour property that is set on $rootScope is available for both the controllers (redColourController & greenColourController). Where as redColour property set on $scope is available only for redColourController and not for greenColourController. Similarly, greenColour property set $scope is available only for greenColourController and not redColourController. Hope this example has made the difference between $rootScope and $scope clear.