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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ng-app="AngularObserveExample">
  
<head>
    <title>
        What is the difference between $watch
        and $observe in AngularJS ?
    </title>
  
    <script src=
    </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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
    </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>

chevron_right


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 chnages in interpolation ({{}}) elements.
$watch uses $scope to watch changes in its values. $observe is used in linking function of dierectives.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.