JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ctrl">
    <input type="number" async ng-keydown="sync($event)" ng-model="model" />
</div>

JavaScript

angular.module('app', [])
.controller('ctrl', function($scope) {

})
.directive('async', ['myService', function(myService) {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel) {

            scope.sync = function($event) {
                $event.preventDefault();
                
                myService.getValue().then(function(response) {
                    myService.setValue(response).then(function(final){ 
                    	ngModel.$setViewValue(final)
                        ngModel.$render()
                    });
                });
            }
        }
    }
}])
.factory('myService', ['$q', '$timeout', function($q, $timeout) {

    function getValue () {
        var deferred = $q.defer();
        
        $timeout(function (){
            deferred.resolve(123); // -- sample number
        }, 250);
    
    	return deferred.promise;
    }
    
    function setValue(value, model) {
        var deferred = $q.defer();
        
        $timeout(function (){
            deferred.resolve(value); // -- sample number
        }, 250);
        
        return deferred.promise;
    }
    
	return {
        getValue: getValue,
        setValue: setValue
    }
}]);