JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp" ng-controller="ctrl1">
    <input type="text" eventually-bind="settings.name" eventually-bind-event="blur"/>
    <input type="text" eventually-bind="settings.name"/>
    <input type="text" ng-model="settings.name"/>
</div>

JavaScript

angular.module('testApp', [])
    .service('settingsService', function ($rootScope, $log) {
        $rootScope.settings = {
            name: 'moshe'
        };
        
        $rootScope.$watch('settings', function () {
            // called when something in the settings has changed (recursively)
            $log.log('report to server');
        }, true);
        
        function getSettings() {
            return $rootScope.settings;
        }
        
        return {
            get: getSettings
        };        
    })
    .controller('ctrl1', function ($scope, settingsService) {
        $scope.settings = settingsService.get();
    })
    .directive('eventuallyBind', function ($compile) {
        return {
            terminal: true,
            priority: 1, // before ng-model
            replace: false,
            scope: {
                eventuallyBind: '='
            },
            link: function (scope, element, attr) {
                var eventName = attr.eventuallyBindEvent || 'blur';
                scope.model = null;
                
                scope.$watch('eventuallyBind', function () {
                    scope.model = scope.eventuallyBind;
                });
                
                element.bind(eventName, function () {
                    scope.eventuallyBind = scope.model;
                    if (!scope.$$phase) {
                        scope.$apply();
                    }
                });
                
                attr.$set('ngModel', 'model');
                element.removeAttr('eventually-bind'); // so the next $compile won't run it again!
                
                $compile(element)(scope);
            }
        };        
    });