How Do I Use $Scope. $Watch and $Scope. $Apply in Angularjs?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful.

What I don't understand specifically:

  • Are they connected to the DOM?
  • How can I update DOM changes to the model?
  • What is the connection point between them?

I tried this tutorial, but it takes the understanding of $watch and $apply for granted.

What do $apply and $watch do, and how do I use them appropriately?

6 Answers

You need to be aware about how AngularJS works in order to understand it.

Digest cycle and $scope

First and foremost, AngularJS defines a concept of a so-called digest cycle. This cycle can be considered as a loop, during which AngularJS checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are implicitly telling AngularJS to monitor the changes on myVar in each iteration of the loop.

A natural follow-up question would be: Is everything attached to $scope being watched? Fortunately, no. If you would watch for changes to every object in your $scope, then quickly a digest loop would take ages to evaluate and you would quickly run into performance issues. That is why the AngularJS team gave us two ways of declaring some $scope variable as being watched (read below).

Sarah Jenkins

Sarah Jenkins

Senior Technology Editor & AI Specialist

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.