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 = ['$compile'];

function transcludeTableDirective($compile) {

  var directive = {

    restrict: 'A',

    transclude: 'element',

    replace: true,

    templateUrl: 'transclude-table-directive.html',

    link: link

  };

  return directive;

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

    var theadEl,

        tbodyEl,

        theadWrapperEl,

        tbodyWrapperEl;

    transcludeFn(scope.$new(), function(clone, scope) {

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

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

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

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

      theadParentEl.append($compile(theadEl)(scope));

      tbodyParentEl.append($compile(tbodyEl)(scope));

    });

  }

}