javascript - angular trigger changes with $watch vs ng-change, ng-checked, etc

Question

Currently we could monitor data changes with several ways. We could trigger model changes with $watch and we could add directives to elements and bind some actions to it.

It's a little bit confusing in many cases, so I'm curious, which is pro and cons of each variant and when should we use $watch binding, and when directives like ng-change?

Answer 1

Both $watch and ngChange have totally different usages:

Lets say you have a model defined on a scope:

$scope.myModel = [
    {
        "foo":"bar"
    }
];

Now if you want to do something whenever any changes happen to myModel you would use $watch:

$scope.$watch("myModel", function(newValue, oldValue){
    // do something
});

ngChange is a directive that would evaluate given expression when user changes the input:

<select ng-model="selectedOption" ng-options="option for option in options" 
ng-change="myModel=selectedOption"></select>

In short, you would normally bind ngChange to some HTML element. While $watch is for the models.