I need to know why is the $watch function used if the AngularJS automatically creates a watch for every model (ng-model) that is created.

(When I say model, I refer to a value in a controller declared like `$scope.value = "somethign" edit-> that is attached to the view by {{}} or ng-model)

My guess is:

1) It is useful to create plex actions when a change is detected on the model. Not just changing the value in the view.

2) It is used to add watchers to values that are NOT binded with the view as models. (This can work out, but is it a good practice?)

That is just my guess, I'd like to know if I'm right.

Also, if there is any advanced way to use the $watch, do tell please.

Thanks.

I need to know why is the $watch function used if the AngularJS automatically creates a watch for every model (ng-model) that is created.

(When I say model, I refer to a value in a controller declared like `$scope.value = "somethign" edit-> that is attached to the view by {{}} or ng-model)

My guess is:

1) It is useful to create plex actions when a change is detected on the model. Not just changing the value in the view.

2) It is used to add watchers to values that are NOT binded with the view as models. (This can work out, but is it a good practice?)

That is just my guess, I'd like to know if I'm right.

Also, if there is any advanced way to use the $watch, do tell please.

Thanks.

• javascript
• angularjs
• controller
• watch

2 Answers 2

As you said, Angular creates a $watch for every binding on screen. That includes both ng-model and {{ ... }} (and ng-repeat and others directives).

When do you want to create your own $watch functions?

Your first guess is a good one. If you need to run some code when a model change, you need to put a watch on it.

Imagine you have a directive that shows some charts and that directives receives via attributes some data. The idea is to do some calculation when new data arrives. How do you do that? You need to watch that data. When the data changes, the $watch fires and you do the calculation, then the DOM is updated.

See an example here

Your second point could be useful too. A $watch can return any kind of code like..

$scope.$watch(function() { return service.foo; }, function() { ... });

so if foo on the service changes, the $watch will trigger. Can be handy on certain use cases.

AngularJS does not automatically create watch functions, unless you (implicitly) tell it to do so. These implicit methods are by adding it to your template in expression language or by using it in a directive.

Moreover, the $scope.$watch function is very useful to run a piece of code when a value changes. I don't see why you should add a watcher to a value that s not binded to a view. This typically would change with a function or when it's triggered by another value that is being watched. This would be a good case for using $scope.$watch.

Read more about the digest cycle of AngularJS and the $watch and $apply functions in this SO-question: How do I use $scope.$watch and $scope.$apply in AngularJS?