JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div id="usersProfile" class="adminPg" ng-app="myApp" ng-controller="EmailCtrl">

    <form name="myForm">
        <input type="text" name="myEmail" ng-model="myEmail" validate-email/>        
    </form>
<pre>
model:{{myEmail}}
error: {{myForm.myEmail.$error|json}}
valid: {{myForm.$valid}}
invalid: {{myForm.$invalid}}
</pre>
</div>

CSS

pre {background:#f0f0f0;margin-top:10px}

JavaScript

angular.module('myApp', [])
        .directive('validateEmail', function () {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, elm, attrs, ctrl) {

                    function validateEmail(email,formatters) {

                        if( ! email ){
                            ctrl.$setValidity('email', false);
                            return formatters ? email : undefined;
                        }

                        var atpos = email.indexOf("@"),
                            dotpos = email.lastIndexOf(".");

                        if ( atpos < 1 || dotpos < atpos+2 || dotpos+2 >= email.length ){
                            ctrl.$setValidity('email', false);
                            return formatters ? email : undefined;
                        }
                        ctrl.$setValidity('email', true);
                        return email;
                    }

                    ctrl.$parsers.unshift(function (viewValue) {
                        return validateEmail(viewValue,0);
                    });

                    ctrl.$formatters.unshift(function (modelValue) {
                        return validateEmail(modelValue,1);
                    });
                }
            };
        });


    function EmailCtrl($scope, $http) {
        $scope.myEmail = "abcggg.com";
    }