A Responsive Blogger Website, That Take my blog to the next level.

I am a Software Developer, Learning and experementing with .Net Technology and try to put my Learning altogether here.

We have all sections related to .Net Technology, like .Net-C#, Asp.Net, MVC, jQuery, AngularJs, Sharepoint. Find out more...

Following are the some of the Advantages of using this Web site :-

  • Get Update about latest in .Net world.
  • Collection of Useful, Frequently used .Net Solutions.
  • It’s beautiful on every screen size (try resizing your browser!)

Difference between $scope and $rootScope

In this tutorial 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 : 

<div ng-controller="redColourController">
    Root Scope Colour : {{rootScopeColour}} <br />
    Red Colour Controller : {{redColour}} <br />
    Green Colour Controller :
    <span style="color:red" ng-show="greenColour == undefined">
        greenColour is undefined

<br />

<div ng-controller="greenColourController">
    Root Scope Colour : {{rootScopeColour}} <br />
    Green Colour Controller : {{greenColour}} <br />
    Red Colour Controller :
    <span style="color:red" ng-show="redColour == undefined">
        redColour is undefined

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.

Difference between $scope and $rootScope