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

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>
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>
AngularJS-Function
AngularJS-Questions
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?