JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myDirective" ng-controller="x">
    <input id="angular" type="text" my-directive="test">{{test}}</div>
    <button onclick="document.querySelector('#angular').value =  'testg';">click</button>

JavaScript

angular.module('myDirective', [])
        .directive('myDirective', function () {
        return {
            restrict: 'A',
            scope: {
                myDirective: '='
            },
            link: function (scope, element, attrs) {
                // set the initial value of the textbox
                element.val(scope.myDirective);
                element.data('old-value', scope.myDirective);
    
                // detect outside changes and update our input
                scope.$watch('myDirective', function (val) {
                    element.val(scope.myDirective);
                });
    
                // on blur, update the value in scope
                element.bind('propertychange keyup change paste', function (blurEvent) {
                    if (element.data('old-value') != element.val()) {
                        console.log('value changed, new value is: ' + element.val());
                        scope.$apply(function () {
                            scope.myDirective = element.val();
                            element.data('old-value', element.val());
                        });
                    }
                });
            }
        };
    });
    
    function x($scope) {
        $scope.test = 'value here';
    }