AngularJS - email validation on-blur

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.user = {};
});

app.directive('checkEmailOnBlur', function(){
    var EMAIL_REGX = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
    return {
  		restrict: 'A',
			require: 'ngModel',
			link: function(scope, elm, attr, ctrl) {

					if (attr.type === 'radio' || attr.type === 'checkbox') return;
					elm.unbind('input').unbind('keydown').unbind('change');
					
					elm.bind('blur', function() {
						scope.$apply(function() {
							if (EMAIL_REGX.test(elm.val())) {
								ctrl.$setValidity('emails', true);
							} else {
								ctrl.$setValidity('emails', false);
							}
						});
					});
			}
    };

});

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

	<form name="myForm">
		<div class="control-group" ng-class="{error: myForm.mail.$invalid}">
			<label>mail</label>
			<input type="text" name="mail" ng-model="user.mail" check-email-on-blur >
			<span ng-show="myForm.mail.$error.emails" class="help-inline">Invalid email</span>
		</div>


</body>
</html>

/* Put your css in here */

.control-group.error .help-inline, 
.control-group.error input {
  border-color: #B94A48;
  color: #B94A48;
}