How to use $scope.$apply() in AngularJS ?

Last Updated : 25 Jul, 2021

In this article, we will be discussing the $apply() function & how to use it in angularjs. In AngularJS, $apply() function is used to evaluate expressions outside of the AngularJS context (browser DOM Events, XHR). Moreover, $apply has $digest under its hood, which is ultimately called whenever $apply() is called to update the data bindings. We will take an example to give a better understanding.

Without using $scope.$apply() function: In the below code, it can be seen that we have two buttons, but one button has an ng-click event to update the name whereas the other has a standard JavaScript listener to update the name. So, you can see that when the first button is clicked, the name changes from "GFG" to "GFG Rocks" but when the second button is clicked, the name is not updated to "Geeks" due to the absence of $scope.$apply call.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$apply() Function in AngularJs</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>

    <script type="text/javascript">
        var app = angular.module("applyApp", []);
        app.controller("applyCtrl", function ($scope) {
            $scope.currentName = "GFG";
            $scope.updatedName = function () {
                $scope.currentName = "GFG Rocks";
            };

            // Event listener added
            var event = document.getElementById("btnapply");
            event.addEventListener("click", function () {

                // To update name on rootScope forcefully,
                // use $apply function
                $scope.currentName = "Geeks";
            });
        });
    </script>
</head>

<body>
    <div ng-app="applyApp" ng-controller="applyCtrl">
        <h2>$apply() Function in AngularJs</h2>
        <input type="button" 
            value="Click to Update Name" 
            ng-click="updatedName()" />

        <input type="button" 
            value="Click to Update Name forcefully." 
            id="btnapply" />
            
        <span style="color: Red">{{currentName}}</span>
    </div>
</body>

</html>

Output:

Using $scope.$apply() call: In the above code, it can be seen that we have two buttons, but one button has an ng-click event to update the name whereas the other has a standard JavaScript listener to update the name. So, you can see that when the first button is clicked, the name changes from "GFG" to "GFG Rocks" and when the second button is clicked, the name gets updated to "Geeks" due to the presence of $scope.$apply call in this.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$apply() Function in AngularJs</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>

    <script type="text/javascript">
        var app = angular.module("applyApp", []);
        app.controller("applyCtrl", function ($scope) {
            $scope.currentName = "GFG";
            $scope.updatedName = function () {
                $scope.currentName = "GFG Rocks";
            };

            // Event listener added
            var event = document.getElementById("btnapply");
            event.addEventListener("click", function () {
                $scope.$apply(() => {

                    // To update name on rootScope 
                    // forcefully, use $apply function
                    $scope.currentName = "Geeks";
                });
            });
        });
    </script>
</head>

<body>
    <div ng-app="applyApp" ng-controller="applyCtrl">
        <h2>$apply() Function in AngularJs</h2>
        <input type="button" 
            value="Click to Update Name" 
            ng-click="updatedName()" />

        <input type="button" 
            value="Click to Update Name forcefully." 
            id="btnapply" />
            
        <span style="color: Red">{{currentName}}</span>
    </div>
</body>

</html>