AngularJS $watch function

Updated on     Kisan Patel

AngularJS Scope.$watch function can be used to react on a model change to trigger some further actions.

The $watch function itself takes two required arguments and a third optional one:

   .controller("MyController", ['$scope', function($scope) {
         $scope.$watch('full_name', function(newVal, oldVal, scope) {
             // the newVal of the full_name will be available here
             // while the oldVal is the old value of full_name


<div ng-app="app" ng-controller="simpleController">
   <input type="text" ng-model="name" placeholder="Your name">
   <p>{{ greeting }}</p>
<script type="text/javascript">
  var myApp = angular.module('app', []);
  myApp.controller("simpleController", ['$scope', function($scope){
      $ = "";
      $scope.$watch("name", function(newValue, oldValue) {
            if ($ > 0) {
                $scope.greeting = $ + ", How are you?";

Here, In our example we use the text input value to print a friendly greeting message.

Here, we have also set up a $watch listener on the name property and detect any changes to the value.




Leave a Reply