JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="TestModule">
    <form name="myForm">
        <input type="text" name="email" validate-email-server-side ng-model="email"/>
    </form>
    myForm.email.$valid: {{myForm.email.$valid}}
</div>

JavaScript

angular.module('TestModule', [])
.service('userService', function($http){
    return {
        checkEmail: function(email) {
            return $http({
                method: 'POST',
                url: '/echo/json/',
                data: 'json=' + encodeURIComponent(angular.toJson({valid: Math.round(Math.random())})),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            });
        }
    };
})
.directive('validateEmailServerSide', function(userService){
    return {
        require:'ngModel',
        link: function(scope,elm,attrs,ngModelCtrl) {
            ngModelCtrl.$parsers.unshift(function (viewValue) {
                userService.checkEmail(viewValue)
                .then(function(res){
                    console.log(res.data);
                    ngModelCtrl.$setValidity('validEmail', res.data.valid);
                });
                return viewValue;
            });
            
            ngModelCtrl.$formatters.unshift(function (modelValue) {
                userService.checkEmail(modelValue)
                .then(function(data){
                    ngModelCtrl.$setValidity('validEmail', data.valid);
                });
                return modelValue;
            });
        }
    };
});