JSFiddle - React, Tailwind, and code Playground

HTML

<html ng-app="mod">
    <head></head>
    <body>
        <div class="border" ng-controller="editCtrl">
            Controller: editCtrl <br/>
            <input type="text" ng-model="name"/>
            <br/>
                Directive: delayInput <br/>
                <input type="text" delay="500" ng-model="name" />
                Directive: delayInput <br/>
                <input type="text" delay="500" ng-model="name" />
        </div>
    </body>
</html>

CSS

.border {
    border: 1px solid gray;
    margin: 8px;
    padding: 8px;
}

JavaScript

function editCtrl($scope) {
    $scope.name = 'namevalue';
}

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

mod.directive('delay', function() {
    return {
        restrict: 'A',
        scope: { name1: "="},
        transclude: true, 
        compile:function (element, attrs, transclude) {
            if (attrs.ngModel) {
                attrs.$set("name1", attrs.ngModel, false);
                attrs.$set('ngModel', 'name1', false);
            }
        }
    };
  })