JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <h2>User Input</h2>
    Model={{someInput}}<br>
    <input ng-model="someInput"
           ng-change="userInput=someInput"
           ext-change="extInput=$value">  
    <br>Last User Input={{userInput}}
    <br>Last External Input={{extInput}}
    <hr>
    <h2>External Input</h2>
    <input ng-model="someInput">
</div>

JavaScript

angular.module("myApp",[]);

angular.module("myApp").directive('extChange', function(){
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
        var lastUserInput = modelCtrl.$viewValue;
        modelCtrl.$viewChangeListeners.push(function() {
            //console.log("viewValue", modelCtrl.$viewValue);
            //console.log("modelValue", modelCtrl.$modelValue);
            lastUserInput = modelCtrl.$viewValue;
        });
        scope.$watch(attrs.ngModel, function(value) {
            if (value!==lastUserInput) {
                 scope.$eval(attrs.extChange, {$value:value});
            }
            console.log("ng-model watch ",value);
            console.log("lastUserInput", lastUserInput);
            
        });
    }
  }
});