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

Last Updated : 28 Apr, 2025

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.

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 (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.

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: