JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<body ng-controller="foo">
    <input type="text" my-directive ng-model="bar" ng-model-options="{debounce: 500}"/> 
</body>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

function foo($scope, $timeout) {
  $scope.bar = "Lorem ipsum";
  
  $timeout(function() {
    $scope.bar = "Dolor sit amet";
  }, 2000);
}

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {},
        link: function (scope, element, attrs, controller) {
            scope.$parent.$watch(attrs.ngModel, function() {
            	console.log("Changed to " + scope.$parent[attrs.ngModel]);
            });
        }
    }
});