Can I delay setting of ng-model until input has been blurred? - angularjs

Question

I have an angularjs application that does a bunch of calculations based on inputs from textboxes. I have it working pretty well, but if the user selects the numbers in the input box and deletes them, the result that's based on that number is immediately changed to undefined. In this case, angularjs is TOO fast. From a UX standpoint, I would prefer that the user is free to edit the textbox and only after they have blurred that box will the calculations update.
Is there way to make this happen right on an input field like this:
<input type="text" ng-model="model" custom-magical-directive>
I know I can create my own directive with an isolated scope and only update the parent model when I'm ready, but I'd prefer to keep it clean because if I end up with something like this:
<div custom-isolated-directive ng-model="model">
<input type="text" ng-model="isolatedModel">
</div>
styling is going to be a challenge.

Answer 1

If you don't want the immediate two way binding provided by ng-model, you can leave it out and use a directive to update the model when you want to:
<input type="text" update-on-blur="data.name" />
directive:
app.directive('updateOnBlur', function(){
return {
restrict: 'A',
scope: {
updateOnBlur: '='
},
link: function(scope, element, attr) {
scope.$watch('updateOnBlur', function(newVal, oldVal) {
element.val(newVal);
});
element.on('blur', function() {
scope.updateOnBlur = element.val();
scope.$apply();
});
}
}
})
Here is a demo: http://plnkr.co/dF9JbfPkgRQxWmGp57ap
A $watch function will make sure that programmatic changes are visible in the input. Then, an event handler updates the model on blur.