JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="App" ng-controller="MainController">
    <input ng-model="value1" ng-change="updateValue('First', value1)" ng-delay="500" />
    <div>{{value1}}</div>
        <input ng-model="value2" ng-change="updateValue('Second', value2)" ng-delay="1000" />
    <div>{{value2}}</div>
        <input ng-model="value3" ng-change="updateValue('Third', value3)" ng-delay="1500" />
    <div>{{value3}}</div>
</div>

JavaScript

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

app.controller('MainController', function ($scope) {
    $scope.values = {};
    $scope.value1 = 'first';
    $scope.value2 = 'second';
    $scope.value3 = 'third';
    
    $scope.updateValue = function (text,value) {
        alert(text + ': ' + value);
    };
});

app.directive('ngDelay', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        scope: true,
        compile: function (element, attributes) {
            var expression = attributes['ngChange'];
            if (!expression)
                return;
            
            var ngModel = attributes['ngModel'];
            if (ngModel) attributes['ngModel'] = '$parent.' + ngModel;
            attributes['ngChange'] = '$$delay.execute()';
            
            return {
                post: function (scope, element, attributes) {
                    scope.$$delay = {
                        expression: expression,
                        delay: scope.$eval(attributes['ngDelay']),
                        execute: function () {
                            var state = scope.$$delay;
                            state.then = Date.now();
                            $timeout(function () {
                                if (Date.now() - state.then >= state.delay)
                                    scope.$parent.$eval(expression);
                            }, state.delay);
                        }
                    };
                }
            }
        }
    };
}]);