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 */