xxxxxxxxxx<html><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script><meta name="description" content="NG - 1.2 model test"> <meta charset="utf-8"> <title>NG - 1.2 model test</title></head><body ng-app="demoApp"> <h1>NG - 1.2 model test</h1> <h4>Without dot and defining property in Ctrl</h4> <ul> <li>ngModel becomes the scope var (doesn't not have to be defined</li> <li>Value attr is not picked up</li> </ul> <form name="form1" ng-controller="FormCtrl1"> <input type="text" ng-model="age" value="10"><!--value attr not picked up by NG--> <p>{{age}}</p> <p>form1 updated: {{updated}}</p> </form> <h4>Dot syntax</h4> <form name="form2" ng-controller="FormCtrl2"> <input type="text" ng-model="person.age"> <p>{{age}}</p> <p>form2 updated: {{updated}}</p> </form> <h4>Controler as syntax</h4> <form name="form3" ng-controller="FormCtrl3 as vm"> <input type="text" ng-model="vm.age"> <p>{{vm.age}}</p> <p>form3 updated: {{vm.updated}}</p> </form> <script id="jsbin-javascript">var app = angular.module('demoApp', []);app.controller('FormCtrl1', function($scope){ //$scope.age = 10; ngModel $scope.updated = 0; $scope.$watch('age', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; });}).controller('FormCtrl2', function($scope){ $scope.person = { age: "" }; $scope.updated = 0; $scope.$watch('person.age', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; });}).controller('FormCtrl3', function($scope){ var vm = this; vm.age = ""; vm.updated = 0; // you don't need scope here, but if you really need $watch (you should not) inject it $scope.$watch('vm.age', function(newValue, oldValue) { if (newValue === oldValue) { return; } vm.updated++; });});</script><script id="jsbin-source-html" type="text/html"><html><head><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"><\/script><meta name="description" content="NG - 1.2 model test"> <meta charset="utf-8"> <title>NG - 1.2 model test</title></head><body ng-app="demoApp"> <h1>NG - 1.2 model test</h1> <h4>Without dot and defining property in Ctrl</h4> <ul> <li>ngModel becomes the scope var (doesn't not have to be defined</li> <li>Value attr is not picked up</li> </ul> <form name="form1" ng-controller="FormCtrl1"> <input type="text" ng-model="age" value="10"><\!--value attr not picked up by NG--> <p>{{age}}</p> <p>form1 updated: {{updated}}</p> </form> <h4>Dot syntax</h4> <form name="form2" ng-controller="FormCtrl2"> <input type="text" ng-model="person.age"> <p>{{age}}</p> <p>form2 updated: {{updated}}</p> </form> <h4>Controler as syntax</h4> <form name="form3" ng-controller="FormCtrl3 as vm"> <input type="text" ng-model="vm.age"> <p>{{vm.age}}</p> <p>form3 updated: {{vm.updated}}</p> </form> </body></html></script><script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('demoApp', []);app.controller('FormCtrl1', function($scope){ //$scope.age = 10; ngModel $scope.updated = 0; $scope.$watch('age', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; });}).controller('FormCtrl2', function($scope){ $scope.person = { age: "" }; $scope.updated = 0; $scope.$watch('person.age', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; });}).controller('FormCtrl3', function($scope){ var vm = this; vm.age = ""; vm.updated = 0; // you don't need scope here, but if you really need $watch (you should not) inject it $scope.$watch('vm.age', function(newValue, oldValue) { if (newValue === oldValue) { return; } vm.updated++; });});</script></body></html> Modified http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js to a secure url
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js