Angular Js PracticeDay2 $apply and $digest in Angularjs

$apply and $digest is used to kick-in digest process manually . Mainly used when the scope variable are modified out of "Angular Context"  and /or UI need to refresh its data-bindings

$apply behind the scene calls the $digest process

$scope.$apply()  and $scope.$digest()


$apply() it starts the digest process from the $RootScope ,After  evaluating the RootScope , the process continues through all child scopes and nested scopes one after another

the angular events ng-click,$timeout and $http(ajax) etc operations  call $apply


$digest - kicks digest process for the current scope (and its child.nested scopes ) only
It doesn't starts from the RootScope or ParentScope
If called from $Rootscope , it will be equivalent to $apply


In the below example ng-model kicks in the digest process which will in turn update the UI

Let understand one scenario of using $apply()

Lets create the below div element in html

<!-- UNDERSTANDING THE DIGEST PROCESS -->
        <div style="border : 2px solid green; margin :3px ;padding :5px ">
            <div id="div1" ng-controller="digestProcessController">
               
                a <input ng-model="a">
                <div> a = {{ a }} </div>
                <br>
               
               
                b <input ng-model="b">
                <div> b = {{ b }} </div>
                <br>
               
                <button ng-click="calcSum()">Calc</button>
                <div> sum = {{ sum }}</div>
                <button onClick="btnClick()">Calc Sum</button>
           
            </div>
        </div>

The below code where ng-click is used is within angular js context and hence $apply is called automatically

                <button ng-click="calcSum()">Calc</button>

For the  below code the $apply() has to be used manually as it is out side the scope of angular context
       
                <button onClick="btnClick()">Calc Sum</button>


below is the controller file

app.controller('digestProcessController',[ '$scope',function($scope){
   
    $scope.a=1; //the digest cycle is called by ng-model
    $scope.b=2; //the digest cycle is called by ng-model
    $scope.sum=0;
   
    $scope.calcSum = function(){
        $scope.sum= Number($scope.a) + Number($scope.b);
    }
}]);

The definition of btnClick is outside the controller class
var btnClick = function()
{
    var $scope=angular.element($("#div1")).scope();
    $scope.sum= Number($scope.a) + Number($scope.b);
    $scope.$apply();
}

This is mentioned to bind the result of sum to the DOM element 

    $scope.$apply();

after hitting the click button the $apply updates the sum in the DOM element