Custom ngModel flag doesn't digest immediately - angularjs

Question

I'm trying to extend ngModel so that I have $empty flag that works even when the validation is failing. We're using it to show a "clear text" button.
The model override works fine, but I'm noticing that the flag changes don't apply immediately. Calling $digest throws an "in progress" error.
myApp.directive('ngModel', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
var checkEmpty = function() {
ngModel.$empty = (ngModel.$$rawModelValue === undefined ||
ngModel.$$rawModelValue.length === 0);
};
checkEmpty();
element.on('keyup', checkEmpty);
}
}
});
http://jsfiddle.net/sxg7nnwm/2/

Answer 1

You could just simply $watch for changes and set the variable:
scope.$watch(function(){
return ngModel.$isEmpty(ngModel.$viewValue);
},
function(v){
ngModel.$empty = v;
})
EDIT:
Of course, this is inefficient as it registers a $watch.
As correctly pointed out in comments, $viewChangeListeners do not fire for invalid entry. Binding to element events is also bad, since ng-model should be DOM-agnostic.
The approach that could work is to register a $parser that runs first. This would work in most cases - but does not guarantee to work in all, since any other directive is free to register their own parsers (at any time) ahead of our parser and invalidate the value before our parser has a chance to run and re-set $empty.
priority: -100,
require: "ngModel",
link: function(scope, element, attrs, ngModel) {
ngModel.$parsers.unshift(function(v) {
ngModel.$empty = isEmpty();
return v;
});
// needed for first time
var unwatch = scope.$watch(function(){
return isEmpty();
}, function(v){
ngModel.$empty = v;
unwatch();
});
function isEmpty(){
return ngModel.$isEmpty(ngModel.$viewValue);
}
}

Answer 2

Are you forced to use the keyup event? To avoid issues with digest timings you should hook into ngModel's pipeline by using $viewChangeListeners instead.
link: function(scope, element, attrs, ngModel) {
var checkEmpty = function() {
ngModel.$empty = (ngModel.$$rawModelValue === undefined || ngModel.$$rawModelValue.length === 0);
console.log(ngModel.$empty);
};
checkEmpty();
ngModel.$viewChangeListeners.push(checkEmpty);
// element.on('keyup', checkEmpty);
}
Fiddle: http://jsfiddle.net/mwup0s9j/1/

Answer 3

Well, I've found that $timeout works, it sets up my code in the next cycle:
element.on('keyup', function() {
$timeout(checkEmpty);
});