angular.module('app', [])

  .controller('appCtrl', appCtrl)

  .directive('transcludeTable', transcludeTableDirective);

​

​

function appCtrl() {

  var vm = this;

  vm.greet = true;

  vm.toggleGreet = toggleGreet;

  function toggleGreet() {

    vm.greet = !vm.greet;

  }

}

​

​

transcludeTableDirective.$inject = ['$templateRequest','$compile'];

function transcludeTableDirective($templateRequest, $compile) {

  var directive = {

    restrict: 'A',

    compile: compile

  };

  return directive;

  function compile(tElement, tAttrs) {

    var clone = tElement.clone();

    var placeholder = angular.element('<!-- placeholder -->');

    var promise = $templateRequest('transclude-table-directive.html').then(function(templateString) {

      var $template = angular.element(templateString);

      var template = $template[0];

      // Make clones of these so we can restore the original element when the scope is destroyed.

      var theadEl = clone.find('thead').clone();

      var tbodyEl = clone.find('tbody').clone();

      theadParentEl = angular.element(template.getElementsByClassName('table-head')[0]);

      tbodyParentEl = angular.element(template.getElementsByClassName('table-body')[0]);

      theadParentEl.append(theadEl);

      tbodyParentEl.append(tbodyEl);

      return template;

    });

    tElement.replaceWith(placeholder);

    return link;

    function link(scope, element, attrs, controller) {

      promise.then(function(template) {

        var replacement = $compile(template)(scope);

        element.replaceWith(replacement);

      });

      scope.$on('$destroy', function() {

        // Put everything back to normal

        element.replaceWith(clone);

      });

    }

  }

}