AngularJS $watch

Keep track of current model value by using $scope Angular, AngularJS

by vishalvasani

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="helloApp" ng-controller="helloCtrl">
    <p>Name:
        <input type="text" placeholder="your name" ng-model="abc">
    </p>
    	<h1>Hello {{myName}}</h1>

    
<h2>{{updated_info}}</h2>

JavaScript

var app = angular.module("helloApp", []);
app.controller("helloCtrl", function ($scope) {
    $scope.a1bc = "";
    $scope.greeting = "h";
    $scope.$watch("a1bc", function (newValue, oldValue) {
        if ($scope.myName.length > 5) {
            $scope.updated_info = "\"" + $scope.myName + "\" has length > 5";
        } else {
            $scope.updated_info = "\"" + $scope.myName + "\" has length <= 5";
        }
    });
});