How AngularJS Works – The Digest Cycle

1. Introduction to AngularJS Digest Cycle

The Digest Cycle in AngularJS is a key mechanism responsible for detecting changes in the application and updating the View (UI) automatically when the Model (data) changes.

• It is an automatic data binding mechanism that ensures that the Model and View remain synchronized.
• The Digest Cycle runs when an event like user input, an HTTP request, or a timer function (e.g., $timeout, $interval) occurs.

---

2. How the Digest Cycle Works?

The Digest Cycle follows these steps:

1. Watches the Model (Data): AngularJS tracks variables (scope properties) for changes.
2. Detects Changes: When a variable changes, AngularJS triggers the Digest Cycle.
3. Compares Old and New Values: AngularJS checks whether the new value differs from the old value.
4. Updates the View (DOM): If a change is detected, AngularJS updates the HTML automatically.
5. Re-runs if Necessary: The cycle runs multiple times until all changes are fully applied.

---

3. Key Components of the Digest Cycle

A. $scope.$watch() – Watching for Changes

• $watch() registers a watcher function to monitor changes in a variable.
• Whenever the watched value changes, AngularJS triggers the Digest Cycle.

Example of $watch()

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.name = "John";

    // Watcher for "name"
    $scope.$watch("name", function (newValue, oldValue) {
        console.log("Name changed from " + oldValue + " to " + newValue);
    });

    // Changing the name after 3 seconds
    setTimeout(function () {
        $scope.name = "Doe";
        $scope.$apply(); // Manually trigger the digest cycle
    }, 3000);
});

Explanation:

• $watch("name", function(newValue, oldValue) {...}) watches the name property for changes.
• When name changes, the callback logs the old and new values.
• $apply() is used to manually trigger the Digest Cycle (explained later).

---

B. $scope.$digest() – Manually Running the Digest Cycle

• scope.$digest() runs the Digest Cycle only for the current scope and its children.
• It is useful when AngularJS does not automatically detect changes (e.g., external libraries modifying data).

Example of $digest()

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.counter = 0;

    document.getElementById("increment").addEventListener("click", function () {
        $scope.counter++;
        $scope.$digest(); // Manually trigger the Digest Cycle
    });
});

Explanation:

• The click event updates $scope.counter, but since it’s an external event, we call $digest() manually to update the UI.

---

C. $scope.$apply() – Running Digest Cycle Globally

• scope.$apply() triggers the Digest Cycle for all scopes in the application.
• It is used when changes occur outside AngularJS’s control, such as in setTimeout, AJAX calls, or third-party libraries.

Example of $apply()

var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
    $scope.message = "Hello!";

    setTimeout(function () {
        $scope.message = "Updated Message!";
        $scope.$apply(); // Triggers a digest cycle to update the view
    }, 2000);
});

Explanation:

• setTimeout() is a JavaScript function, so AngularJS does not detect the change automatically.
• $apply() forces AngularJS to run the Digest Cycle and update the view.

---

4. Digest Cycle Execution Flow

1️⃣ User Interacts with UI (e.g., enters text, clicks a button)
2️⃣ AngularJS Detects Changes via event listeners (e.g., ng-model, ng-click)
3️⃣ Digest Cycle Starts and calls all watchers ($watch())
4️⃣ Old & New Values Compared
5️⃣ View (DOM) Updates Automatically
6️⃣ Re-runs Until No Further Changes Are Detected

---

5. How Many Times Does the Digest Cycle Run?

• At least twice (to capture nested changes).
• Runs multiple times (Max: 10 iterations) to ensure all changes are applied.
• If changes continue after 10 iterations, AngularJS throws an error:
  “10 $digest() iterations reached. Aborting!”

---

6. When Does the Digest Cycle Run Automatically?

• Event Handlers (ng-click, ng-change, ng-model)
• HTTP Requests ($http.get(), $http.post())
• Timeout Functions ($timeout, $interval)
• Promises ($q.then())

If you modify data outside these events, you need to manually trigger the Digest Cycle using $apply() or $digest().

---

7. Performance Considerations in Digest Cycle

🔹 Too Many Watchers – More watchers slow down performance.
🔹 Avoid Using $apply() Excessively – It triggers a full digest cycle.
🔹 Limit DOM Manipulations – Heavy DOM updates slow down performance.
🔹 Use One-Time Binding (:: syntax) – Improves efficiency when values do not change frequently.

Example of One-Time Binding

<p>{{ ::username }}</p> <!-- Username is only evaluated once -->

Benefit: Reduces unnecessary Digest Cycle triggers.