My ng-model input elements are being updated by non-angularJS functions like jQuery or pure JavaScript DOM APIs. The value on the HTML input changes, but the model scope variable does not update. Is there a way to force Angular to process these updates?
app.js
After a 5-second timeout, the value of 1 is changed to 999. This change is reflected in the HTML, but not in $scope.val.
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', '$timeout',function($scope,$timeout) {
$scope.val = '1';
$timeout(function(){
document.getElementById("myid").value = 999;
},5000)
}]);
HTML
<form name="testForm" ng-controller="ExampleController">
<input id="myid" ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
aria-describedby="inputDescription" />
<div>
{{val}}
</div>
</form>
I have also included the code in this Plunker example: http://plnkr.co/edit/4OSW2ENIHJPUph9NANVI?p=preview