var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.testModel1 = {value: 100};
$scope.testModel2 = {value: 100};
$timeout(function () {
$scope.testModel1 = {value: 200};
$scope.testModel2 = {value: 200};
}, 1000)
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.4/angular.js" data-semver="1.4.4"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="testForm">
<input name="testField1" ng-model="testModel1.value" maxlength=10>
<br>
Errors: {{ testForm.testField1.$error | json }}
<br>
viewValue: {{ testForm.testField1.$viewValue | json }}
<br>
modelValue: {{ testForm.testField1.$modelValue | json }}
<br>
<div name="testField2" style="font-weight: bold; margin-top: 50px"
data-ng-model="testModel2.value"
data-ng-bind="testModel2.value" maxlength="9">
{{ testModel2.value }}
</div>
Errors: {{ testForm.testField2.$error | json }}
<br>
viewValue: {{ testForm.testField2.$viewValue | json }}
<br>
modelValue: {{ testForm.testField2.$modelValue | json }}
<br>
</form>
</body>
</html>
/* Put your css in here */