JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='simpleApp'>
  <div ng-controller='MainCtrl' class='ctrl'>
    <div app-control api='api' class='dir'></div>
  </div>
</div>

CSS

.ctrl {
  position: relative;
  border: 1px solid black;
  width: 300px;
  height: 300px;
}

.dir {
  border: 1px solid green;
  width: 300px;
  height: 200px;
}

.tool {
  border: 1px solid red;
}

.transcluded-content {
  width: 300px;
  height: 200px;
  background-color: green;
}

JavaScript

(function() {

	angular.module('simpleApp', [])
  	.controller('MainCtrl', function($scope, $timeout) {
    	$scope.api = {};
      
    	$scope.init = function() {
      	$timeout(function() {
        	$scope.api.doWork();
        })
      }
      
      $scope.init()
    })
    .directive('appControl', function() {
    	return {
				restrict: 'A',
        template: '<div class="tool"><div app-tool>Content of appControl</div></div>',
        scope: {
        	api: '=api'
        },
        controller: function($scope) {
          var me = this;
        	this.doWork = function() { console.log('doWork') };
          this.doSomething = function() { console.log('doSomething') };
          
          angular.extend($scope.api, {
          	doWork: me.doWork.bind(me),
            doSomething: me.doSomething.bind(me)
          })
        },
        controllerAs: 'dirCtrl'
      }
    })
    .directive('appTool', function() {
    	return {
				restrict: 'A',
  	    template: '<span>Appended tool</span><div ng-transclude class="transcluded-content"></div>',
	      transclude: true
      }
    });
})();