JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp" ng-controller="MyCtrl">
    <button my-directive="doSomething">Button</button>
</div>

JavaScript

angular.module('MyApp', [])

.factory('myService', function($q, $rootScope) {
    
    return {
        doSomethingHard: function() {
            alert('3. doing something hard');
            
            var deferred = $q.defer();

            setTimeout(function() {
                alert('4. resolving deferred');
                $rootScope.$apply(deferred.resolve('Hello World!'));
            }, 1000);
       
            return deferred.promise;
        }
    };
    
})

.controller('MyCtrl', function($scope, myService) {

    $scope.doSomething = function() {
        alert('2. doing something');
        var promise = myService.doSomethingHard();
        
        promise.then(function(result) {
            alert('5. ' + result);
        });
    };
    
})

.directive('myDirective', function($parse) {
    return {
        scope: {
            myParsedFunction: '=myDirective'  
        },
        link: function(scope, el) {
            
            el.bind('click', function() {
                alert('1. clicked button');
                scope.myParsedFunction();
            });
        }
    };
});