JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <form name="form" ng-controller="hi">
        <div> <a href="#" ng-click="formData.hello = 'hello world!';">update text</a>

        </div>
        <testchange name="hello" ng-model="formData.hello" />
        <ol>
            <li ng-repeat="item in history track by $index">{{ item }}</li>
        </ol>
    </form>
</div>

JavaScript

angular.module('app', []);

angular.module('app').controller('hi', function ($scope) {
    $scope.formData = {
        'hello': '',
    };

    $scope.history = [];
});

angular.module('app').directive('testchange', function () {
    return {
        restrict: 'E',
        require: 'ngModel',
        template: '<div><input type="text" name= "{{ name }}"><span>lala</span></div>',
        link: function (scope, elm, attrs, ctrl) {
            scope.name = attrs.name;
            ctrl.find('input').$parsers.unshift(function (viewValue) {
                console.log('value changed to ' + viewValue);
                scope.history.push(viewValue);
            });
            ctrl.find('input').$formatters.push(function (value) {
                console.log('Model changed' + value);
                return value;
            });
        }
    }
});