JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="MyCtrl as vm">
  <dad></dad>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', [function() {
  var vm = this;
}]);

myApp.directive('dad', ['$compile', function($compile) {
  return {
    template: '<div class="btn btn-default" ng-click="vm.addChild()">Add Child</div>',
    controllerAs: 'vm',
    controller: function($scope, $element, $attrs) {
      var vm = this;
      this.ctrl = "Dad Controller";
      this.addChild = function() {
        $element.append($compile('<son></son>')($scope, undefined, {
          transcludeControllers: {
            dad: {
              instance: vm
            }
          }
        }));
      }
    }
  }
}]);

myApp.directive('son', ['$compile', function($compile) {
  return {
    scope: {},
    require: ['?^dad', 'son'],
    controller: function($scope, $element, $attrs) {
      this.ctrl = "Son Controller";
    },
    compile: function(element, attrs, transclude) {
      return {
        pre: function preLink(scope, element, attrs, ctrls, transclude) {},
        post: function postLink(scope, element, attrs, ctrls, transclude) {
          scope.ctrls = ctrls;
          element.append($compile('<div ng-repeat="ctrl in ctrls">ctrl_{{$index}}:<pre>{{ctrl|json}}</pre></div>')(scope));
          console.log(ctrls);
        }
      }
    }
  }
}]);