ngModel updated after ngBlur - angularjs

Question

I'm using ui-bootstrap's datepicker input with AngularJS. It has an ngModel and a validatioon method bound to ngBlur event:
<input id="startDate" type="text" ng-model="myCtrl.startDate" ng-blur="myCtrl.validateDate()"/>
The validation method checks the ngModel according to set of rules in the controller, and alerts if needed. Here is the related part of the controller:
var vm = this;
vm.startDate = new Date();
vm.minStartDate = new Date(2000,1,1);
vm.validateDate = function(){
if(vm.startDate < vm.minStartDate)
alert("Start date can't be earliar than 2000");
}
The problem is that, the validation method runs before the update of the model. Example scenario is as follows:
The rule: startDate can't be earlier than year 2000.
When the page loads, startDate value is initially set to today. The user selects 31.12.1999 from the calendar, ngBlur method is called. However, ngModel is not yet updated. Thus the validation checks today's value and says ok. Actually, it should have checked ngModel's value with 31.12.1999. The value changes simultaneously on the input view, but in the background, it is set after the blur method is fired. As far as I know, two-way binding in AngularJS normally serves for this purpose but the ngBlur must be an exception.
I have tried many thing such as;
Adding ng-model-options to the component:
ng-model-options="{ updateOn: 'blur' }"
Using pre and post linking by modifying the input element
Using ng-change instead of ng-blur
However, none of the above works, and still ng-blur runs before the model is updated.

Answer 1

I have found the solution by manually updating the values inside the controller. Obviously AngularJS won't update the model with the value inside the HMTL element until blur event is fired. So, it's better to write a method to update it.
I can access the value inside the element as follows:
vm.startDate = angular.element('#startDate').val();
Then I can wrap this with a method:
vm.updateModels() = function(){
vm.startDate = angular.element('#startDate').val();
}
Finally, I just call this at the very first of my blur event:
vm.validateDate = function(){
//Update first
vm.updateModels();
//Then validate
if(vm.startDate < vm.minStartDate)
alert("Start date can't be earliar than 2000");
}
Ta tammm, now I can validate the updatet values!

Answer 2

A simple way to make sure that your validation fires only once the value is updated would be to call it on an ng-change instead of ng-blur. That way you are sure that the controller evaluates only once the ng-model value has been updated.

Answer 3

Try to build you own custom validator (directive)
app.directive('integer', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.integer = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty models to be valid
return true;
}
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
return true;
}
// it is invalid
return false;
};
}
};
});
Check this example
https://plnkr.co/edit/SZoBKakhzIq5wRoCvEyG?p=preview