$scope.$watch() vs. $scope.$digest() – Differences

In AngularJS, both $scope.$watch() and $scope.$digest() are used for change detection, but they serve different purposes and work in different ways.

---

1. What is $scope.$watch()?

$scope.$watch() is used to observe changes in a variable and execute a callback function when the variable’s value changes.

How $watch() Works?

• It monitors a specific $scope variable.
• When the variable changes, it triggers a callback function.
• It registers itself in the digest cycle, meaning it gets automatically checked when AngularJS updates the UI.

Syntax:

$scope.$watch(watchExpression, callbackFunction, deepWatch);

Parameter	Description
watchExpression	The variable or function to watch.
callbackFunction	Function that executes when a change is detected.
deepWatch (optional)	true enables deep checking for objects and arrays.

Example of $scope.$watch()

app.controller('MainController', function($scope) {
  $scope.name = "AngularJS";

  $scope.$watch('name', function(newValue, oldValue) {
    console.log("Value changed from", oldValue, "to", newValue);
  });

  $scope.updateName = function() {
    $scope.name = "Updated AngularJS";
  };
});

Whenever $scope.name changes, the callback logs the old and new values.

Limitation of $watch()

• Too many $watch() calls can slow down performance.
• Only tracks one variable at a time.

---

2. What is $scope.$digest()?

$scope.$digest() manually triggers AngularJS’s digest cycle, which checks for all model changes and updates the UI.

How $digest() Works?

• It runs a digest cycle only on the current $scope and its children.
• It repeatedly checks for changes until no more changes are detected.
• It does not automatically run, unlike $apply().

Syntax:

$scope.$digest();

Example of $scope.$digest()

app.controller('MainController', function($scope) {
  $scope.count = 0;

  $scope.increment = function() {
    $scope.count++;
    $scope.$digest(); // Manually trigger digest cycle
  };
});

Here, $scope.$digest() ensures the UI updates when $scope.count is modified.

Limitations of $digest()

• Limited to the current scope (unlike $apply() which triggers a global digest).
• If multiple updates occur, you need to call $digest() each time.

---

3. Key Differences Between $scope.$watch() and $scope.$digest()

Feature	$scope.$watch()	$scope.$digest()
Purpose	Watches a variable for changes	Manually triggers digest cycle
Usage	Used to track changes in a variable	Used to force UI updates
Scope	Monitors a specific variable	Runs digest cycle on current scope only
Triggering Mechanism	Automatically runs when the variable changes	Must be called manually
Performance Impact	Can slow down if too many watches exist	Less impact but requires manual execution

---

4. When to Use Each?

Use $scope.$watch() when:

• You need to track changes in a variable.
• You want to trigger actions only when a specific variable changes.

Use $scope.$digest() when:

• You’re updating a $scope variable outside of AngularJS (e.g., setTimeout, jQuery).
• You need to manually refresh the UI for performance optimization.

---

5. $scope.$digest() vs. $scope.$apply()

If you need a global update, use $apply() instead of $digest().

Feature	$scope.$digest()	$scope.$apply()
Scope Coverage	Affects only the current scope and children	Affects all scopes in the app
Automatic Execution	No, must be called manually	Calls $digest() internally

Example of $scope.$apply()

setTimeout(function() {
  $scope.message = "Updated after 2 seconds";
  $scope.$apply(); // Updates all scopes
}, 2000);

$scope.$apply() ensures that changes are detected in the entire app.