var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>$watch in AngularJs</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
  <script>
    var app = angular.module("watchApp", []);
    app.controller("watchCtrl", ["$scope", function($scope) {
      $scope.count = 0;
      $scope.watching = 'Anil kr. Singh';

      //This is used for watching to "watching" in scope and return the length of it.
      $scope.$watch('watching', function(n1, o1) {
        $scope.count = $scope.count + $scope.watching.length;
      });
    }]);
  </script>
</head>

<body ng-app="watchApp" ng-controller="watchCtrl">
  <h1>$watch in AngularJs</h1>
  <div>
    <input type="text" ng-model="watching" />
    <label>Count Result : {{count}}</label>
  </div>
</body>

</html>
/* Put your css in here */