The solution I discovered was inspired by a discussion on stackoverflow found at this link
I have implemented a filter for the modelValue to achieve my desired custom date format, resulting in the viewValue being formatted as 'dd.MM.yy'.
ngModelCtrl.$formatters.push(function(modelValue) {
if(modelValue) {
var filtered = $filter('date')(modelValue, 'dd.MM.yy');
return filtered;
}
});
In addition, I utilized the following code to promptly convert milliseconds to a valid date:
/*https://stackoverflow.com/questions/22639485/angularjs-how-to-change-the-value-of-ngmodel-in-custom-directive*/
// $parse works out how to get the value.
// This returns a function that returns the result of your ng-model expression.
var modelGetter = $parse(attrs['ngModel']);
console.log(modelGetter(scope));
var timeInMilliseconds = modelGetter(scope);
if(timeInMilliseconds != null) {
// This returns a function that lets us set the value of the ng-model binding expression:
var modelSetter = modelGetter.assign;
// This is how you can use it to set the value 'bar' on the given scope.
modelSetter(scope, new Date(timeInMilliseconds));
console.log(modelGetter(scope));
}
To reflect these changes, I have updated the relevant link: http://plnkr.co/edit/lZZh5VvCzH6yYh1t8xVM?p=preview. As a result, all validation errors have been resolved.