Understand $scope and $rootScope in AngularJS

We know that Angular is very much modular everything is very much de-couple here. We know that the concept of two-way data binding is very popular in angularJS. The model will get update once data in view get change.

Now the question is, how the data will get change? Here $scope and $rootScope will come into picture. We can simply think $scope as glue which helps to attach model and view.

So, $scope is one service in angular which act as glue and attaches model to view. The concept is $rootScope is also similar. This is too one service of angularJS. Every application has a single root scope. All other scope are descendent scope of the root scope. Scope provide separation between the model and the view via a mechanism for waitching the model for changes.

Understand $scope in Angular

Let us understand the concept of scope with example. Here we have defined very simple module and controller.

We can observe that $scope service is injected to scopeTest1 controller and we are assigning some string to data model within controller.

<script>

        var myapp = angular.module('myapp', []);

        myapp.controller('scopeTest1', function ($scope) {

            $scope.data = "Scope data";

        });

</script>

Now, we will implement view to reflect model data.

<div ng-app="myapp">

        <div ng-controller="scopeTest1">

             {{data}}

        </div>

</div>

Here is sample output 

Understand $rootScope in Angular

As discussed, $rootScope is very similar to $scope but present one in whole application. All $scope are child of root scope. If we attach any model in $rootScope then it will accessible from any controller as it has defined in root level. Let us implement it in one example.

We have attached two controllers in myapp module. Within scopeTest1 controller we have defined GlobalModel model and attached with $rootScope . Please note that we did not re defined it within scopeTest2 controller.

<script>

        var myapp = angular.module('myapp', []);

        myapp.controller('scopeTest1', function ($scope, $rootScope) {

            $rootScope.GlobalModel = "I am root scope";

        });

        myapp.controller('scopeTest2', function ($scope, $rootScope) {

           

        });

</script>

Here is view where we will consume both controller.

<div ng-app="myapp">

        <div ng-controller="scopeTest1">

             {{GlobalModel}}

        </div>

        <div ng-controller="scopeTest2">

            {{GlobalModel}}

        </div>

</div>

And we are seeing that model within scopeTest2 controller is also get populated with $rootScope data.