JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="AppController">
        <div my-transclude>
            <my-transclude-title> <strong ng-bind="title"></strong>

            </my-transclude-title>
            <my-transclude-body>My name is {{name}} and I've been transcluded!</my-transclude-body>
        </div>
    </div>
</div>

JavaScript

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

  module.controller('AppController', function ($scope) {
      $scope.title = "A Transclusion Example";
      $scope.name = "Karl";
  });

  module.directive('myTransclude', function () {
      return {
          restrict: 'A',
          transclude: true,
          replace: true,
          scope: true,
          template: '<div style="border: 1px solid {{color}}"><div class="my-transclude-title"></div><div class="my-transclude-body"></div></div>',
          link: function (scope, element, attrs, controller, transclude) {
              scope.color = "red";
              transclude(scope, function (clone, scope) {
                  Array.prototype.forEach.call(clone, function (node) {
                      if (!node.tagName) {
                          return;
                      }
                      // look for a placeholder node in the template that matches the tag in the multi-transcluded content
                      var placeholder = element[0].querySelector('.' + node.tagName.toLowerCase());
                      if (!placeholder) {
                          return;
                      }
                      // insert the transcluded content
                      placeholder.appendChild(node);
                  });
              });
          }
      }
  });