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() {
    
        $scope.promiseFromController = $http.get('/echo/json/');

    }
    init();
}

 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);
        });
     }
   }
})