Post
Ask Question

$scope.$digest(), $scope.$apply(), $rootScope.$digest(), $rootScope.$apply() Functions In Angular

Introduction

This article will explain the working of various functions of AngularJS- $scope.$digest(), $scope.$apply(), $rootScope.$digest(), $rootScope.$apply().

  • $scope.$digest()
    It updates the data binding. It iterates through all the watches and checks any value updated. This will run watcher for the current scope.

  • $scope.$apply()
    This function is used to execute an expression in Agular. The function expression is optional and you can directly use $apply(). This is used to run watcher for the entire scope.

  • $rootScope.$digest()
    This is used to call watcher for the entire scope. It is equivalent to $scope.$apply() with no optional function expression.

  • $rootScope.$apply()
    This is same as $scope.$apply() but when we have different controllers that are using the same services, then better use $rootScope.$apply() on the service.

The example below demonstrates the working of all the above functions.

Create the HTML and JS file as below.

Index.html

  1. <!DOCTYPE html>  
  2. <html lang="en-US">  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
  4. <script src="myScript.js"></script>  
  5. <body ng-app="app">  
  6. Root val: {{val}}  
  7. <br>  
  8. <br>  
  9. <div ng-controller="myController1">MyController1: <br>  
  10.     Root val: {{val}} <br>  
  11.     myController1 Value: {{val1}}  
  12.     <br><button id="Button1">UpdateButton 1</button>  
  13. </div>  
  14. <br>  
  15. <div ng-controller="myController2">MyController2: <br>  
  16.     Root val: {{val}} <br>  
  17.     myController2 Value: {{val2}}  
  18.     <br><button id="Button2">UpdateButton 2</button>  
  19. </div>  
  20. <br>  
  21. <div ng-controller="myController3">MyController3: <br>  
  22.     Root val: {{val}} <br>  
  23.     myController3 Value: {{val3}}  
  24.     <br><button id="Button3">UpdateButton 3</button>  
  25. </div>  
  26. <br>  
  27. <div ng-controller="myController4">MyController4: <br>  
  28.     Root val: {{val}}<br>  
  29.     myController4 Value: {{val4}}  
  30.     <br><button id="Button4">UpdateButton 4</button>  
  31. </div>  
  32.   
  33. </body>  
  34. </html>   

myScript.js

  1. var module=angular.module("app", []);  
  2.   
  3. var controller1 = module.controller("myController1", function($scope, $rootScope){  
  4.     $scope.val1 = 1;  
  5.     $rootScope.val = 1;   
  6.     document.getElementById("Button1").addEventListener("click", function(){  
  7.         $scope.val1 += 1;  
  8.         $rootScope.val += 1;          
  9.     });  
  10. });  
  11.   
  12. var controller2 = module.controller("myController2", function($scope, $rootScope){  
  13.     $scope.val2 = 1;  
  14.     $rootScope.val = 1;   
  15.     document.getElementById("Button2").addEventListener("click", function(){  
  16.         $scope.val2 += 1;  
  17.         $rootScope.val += 1;  
  18.         $scope.$digest();         
  19.     });  
  20. });  
  21.   
  22. var controller3 = module.controller("myController3", function($scope, $rootScope){  
  23.     $scope.val3 = 1;   
  24.     $rootScope.val = 1;   
  25.     document.getElementById("Button3").addEventListener("click", function(){  
  26.         $scope.val3 += 1;  
  27.         $rootScope.val += 1;  
  28.         $scope.$apply();          
  29.     });  
  30. });  
  31.   
  32. var controller4 = module.controller("myController4", function($scope, $rootScope){  
  33.     $scope.val4 = 1;  
  34.     $rootScope.val = 1;   
  35.     document.getElementById("Button4").addEventListener("click", function(){  
  36.         $scope.val4 += 1;  
  37.         $rootScope.val += 1;  
  38.         $rootScope.$digest();  
  39.     });  
  40. });  

Open the index.html file in the browser.

Note: For every button click, we have done increment by 1 for the RootScope 'val' and scope 'val'.

  1. You will get the following output.

    output

RootScope val = 1

and val1 = 1, val2 = 1, val3 = 1, val4 = 1.

  1. Click on UpdateButton1.

    output
    You can see that the values for RootScope 'val' and Scope 'val1' have been updated but it is not binded to the UI View. Because the functions other than scope have updated the value of the model. So, it needs the watcher to identify the new value. We have to manually call the 'apply' or 'digest' function to update the values.

RootScope val = 2

val1 = 2, val2 = 1, val3 = 1, val4 = 1.

  1. Click on UpdateButton 2.

    output

RootScope val = 3

val1 = 2, val2 = 2, val3 = 1, val4 = 1.

The values of Controller2 have been updated because we have called the digest manually inside it.

  1. Click on UpdateButton 3.
    output

RootScope val = 4

val1 = 2, val2 = 2, val3 = 2, val4 = 1

Also, all the scope has been updated because we have called 'apply' function that starts the watcher of values for all the scope variables.

  1. Click on UpdateButton4.

    output

RootScope val = 5

val1 = 2, val2 = 2, val3 = 3, val4 = 4.

This also updates all the scope watched values as it is equivalent to the $scope.$apply().

$watch()

This function is attached to all the scope variables that we declared. Any changes to the value have been watched here in this function to update the binding of values from UI to Controller and vice versa.

This function is also used to add specific type values with the help of its parameters 'oldValue' and 'newValue' inside it.

Learn $watch for more details.


Similar Articles