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

Last Updated : 13 Aug, 2021

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: It 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:

HTML

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

Example: 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.

HTML

<!DOCTYPE html>
<html ng-app="AngularObserveExample">
 
<head>
    <title>
        What is the difference between $watch
        and $observe in AngularJS ?
    </title>
 
    <script src=
"http://code.angularjs.org/1.0.6/angular.min.js">
    </script>
 
    <script>
        var myApp = angular.module('observeApplication', []);
 
        myApp.directive('focus', function () {
            return function (scope, element, attrs) {
                attrs.$observe('focus', function (newValue) {
                    newValue === 'true' && element[0].focus();
                });
            }
        });
 
        function MyCtrl($scope) {
            $scope.cues = [{
                text: 'text for the first item',
                isNew: false
            }, {
                text: 'text for the second item',
                isNew: true
            }];
            $scope.switchNewest = function () {
                $scope.cues[1].isNew = !$scope.cues[1].isNew
                $scope.cues[0].isNew = !$scope.cues[0].isNew
            }
        }   
    </script>
</head>
 
<body>
    <div ng-app="observeApplication" ng-controller="MyCtrl">
        <ul>
            <li ng-repeat="cue in cues" class="form-inline">
                <input type="text" ng-model="cues[$index].text"
                    focus="{{cue.isNew}}" class="input-xlarge" />
                {{cue.isNew}}</li>
        </ul>
         
        <a ng-click="switchNewest()">switch newest</a>
    </div>
</body>
 
</html>

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 (includes any controller or linking functions in the directive). When we want to observe/watch any model/scope property we use $watch.

Syntax:

HTML

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

Example: 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.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <script src=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>
 
    <script type="text/javascript">
        var app = angular.module('watchApplication', []);
        app.controller('watchCtrllr', function ($scope) {
            $scope.countCheck = -1;
            $scope.$watch('textval', function (newval, oldval) {
                $scope.countCheck = $scope.countCheck + 1;
            });
        });
    </script>
 
</head>
 
<body>
    <div ng-app="watchApplication" ng-controller="watchCtrllr">
         
        <h2>AngularJS $watch() Function Example</h2>
         
        Enter Text:<input type="text" ng-model="textval" />
         
        <br /><br />
         
        <span style="color:Red">
            No. of Times $watch() Function Fired: {{countCheck}}
        </span>
    </div>
</body>
 
</html>

Output:

Output1

Difference Between $observe and $watch:

$watch	$observe
Observe changes in string/expression/function.	Observe changes in DOM element.
$watch is a way of triggering changes in digest.	$observe watches changes in interpolation ({{}}) elements.
$watch uses $scope to watch changes in its values.	$observe is used in linking function of directives.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

My Personal Notes