$viewValue in ngModelController displays different on IE and Chrome/Firefox - angularjs

Question

I have created directive myInput that require ngModel controller and then alert ngModelCtrl.$viewValue in input-event trigger catch when I stoke the key. I get different result between IE and Chrome/Firefox
As follow:
http://jsfiddle.net/southbridge/zgyv14g0/
In IE It displays previous value of Input before I've stroked the keyboard ,but in Chrome/Firefox It displays current value .
app.directive('myInput',function(){
return {
restrict:'A',
require:'ngModel',
link:function(scope,element,attrs,ngModelCtrl){
element.on('input',function(){
var x=ngModelCtrl.$viewValue;
alert(x);
});
}
}
});

Answer 1

I am not sure if the input event will trigger after the $viewvalue property has been updated by angular (most possibly not), because angular updates viewvalue property by listening to input/change etc.. events itself.
However one more criteria is the priority of the directive (if you are angular 1.3 and less then provide your directive a priority greater than ngModels i.e ex:1, priority of ngModel has been revised to 1 starting 1.3) and which handler runs first. But if you really just need the value of the input element you could just try accessing it with value property inside the handler i.e this.value
However if you really need the current $viewvalue best bet would be to use $viewChangeListeners of the ngModelController.
.directive('myInput',function(){
return {
restrict:'A',
require:'ngModel',
priority: 1, //if required
link:function(scope,element,attrs,ngModelCtrl){
ngModelCtrl.$viewChangeListeners.push(handleViewValueChange);
function handleViewValueChange(){
alert(ngModelCtrl.$viewValue);
}
//element.on('input', handleViewValueChange); //Or just use this.value in the handler
}
}
});
Array of functions to execute whenever the view value has changed. It is called with no arguments, and its return value is ignored. This can be used in place of additional $watches against the model value.
angular.module('app', []).controller('ctrl', function($scope) {
}).directive('myInput', function() {
return {
restrict: 'A',
require: 'ngModel',
priority: 1, //If needed
link: function(scope, element, attrs, ngModelCtrl) {
ngModelCtrl.$viewChangeListeners.push(handleViewValueChange);
function handleViewValueChange() {
var x = ngModelCtrl.$viewValue;
alert(x);
}
element.on('input', function() {
alert(ngModelCtrl.$viewValue); //or hust this.value
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input my-input ng-model="model" />{{model}}
</div>