AngularJS update model upon input blur

directive.js

function Main() {}


// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;
            
            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});
​

example.html

<input type="text" ng-model="value" ng-model-onblur>
{{value}}

IE8 doesn't have the input event and will throw a mismatch error so use the $sniffer service to check prior to calling unbind.

if ($sniffer.hasEvent('input')) {
        elm.unbind('input');
      }

      elm.unbind('keydown').unbind('change');