What is the difference between $watch and $observe in AngularJS ?

AngularJS provides different methods to observe/watch the changes in its elements and variables. The $observe and $watch are two different methods that serve this purpose. $observe is a method that is responsible to observe/watch the changes in the DOM attribute. We use $observe when we want to observe a DOM element that contains interpolation ({{}}).

Syntax: 

<!-- Interpolation Element -->
attr1 = "Name: {{name}}"
<!-- Syntax of Observe in controller -->
attrs.$observe('attr1', function() {
 // body
});

Example 1: Here when we click on the hyperlink(switch newest), the attribute gets true or false on the basis of the click event. The $observe is observing the changes in its DOM and putting the attribute values accordingly.

Output:

👁 Output1

$watch: To observe any expression, either function or a string we use a $watch method. It is a method on the $scope object, therefore, it can be used wherever you have access to a scope object (including any controller or linking functions in the directive). When we want to observe/watch any model/scope property we use $watch.

Syntax:

attr1 = "myModel.some_prop";
scope.$watch(attrs['attr1'], function() {
// body
});

Example 2: In this example, we are putting the text in the text field and as the cursor is up or down the function is called the changes are observed by $watch and we are displaying the count of the number of times a function is called.

Output: 

👁 Output1

Difference Between $observe and $watch: