JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
      <my-directive promise="promiseFromController"></my-directive>
  </div>
</body>

JavaScript

function MyCtrl($scope, $q, $http) {
    function init() {
				var deferredCall = $q.defer();
        
        // simulated ajax call to your server
        // the callback will be executed async
        $http.get('/echo/json/').then(function(data) {
        		console.log('received', data);
            deferredCall.resolve(data); //<-- this will resolve the promise you'll handover to your directive
        });
        
        // we're return our promise immediately
        $scope.promiseFromController = deferredCall.promise;
    }
    init();
}
//MyCtrl.$inject = ['$q','$http'];

 angular.module('myApp',[])
.controller('MyCtrl', MyCtrl)
.directive('myDirective', function() {
   return {
     scope: {
       promise: '='
     },
     controller: function($scope) {
     		console.log($scope);
				$scope.promise.then(function(data) {
        		console.log('received data in directive', data);
        });
     }
   }
})