How to do multiple transclusions right

timeseries.html

        <te-widget>
          <te-widget-config>
        <div class="te-dash-config-search ui-form">
            <input class="te-dash-config-search-field"
                   type="text" ng-model="tempCfg.search" ng-change="testLimit = 10" />
        </div>
          </te-widget-config>
          <te-widget-body>
                <te-timeseries timeseries-config="widget.config" />
          </te-widget-body>
        </te-widget>

widget.html

        <div class="te-dash-{{widget.type}} te-dash-widget">
            <header>
                <div class="te-dash-config">
                    <div te-widget-config-transclude></div>
                    <div ng-include=" 'teDashWidgetSettings.html' "></div>
                </div>
                <h3 class="dashboard-title">{{ widget.meta.title }}</h3>
            </header>
            <div te-widget-body-transclude></div>
            <!--
            Not sure if this should be in the same template or kept separate
            <div te-widget-settings-transclude></div>
            -->
        </div>

widget.js

(function () { 'use strict';

angular.module('te.dash.common.widget', [
])

.controller('TeWidgetCtrl', WidgetCtrl)


.directive('teWidget', function () {
    return {
        restrict: 'E',
        // templateUrl: 'widget.html',
        controller: 'TeWidgetCtrl',
        // replace: true,
        compile: function (tElem) {
            tElem.append('<te-widget-transclude />');
        }
    };
})


.directive('teWidgetConfig', function () {
    return {
        restrict: 'E',
        require: '^teWidget',
        transclude: 'element',
        link: function (scope, elem, attrs, widgetCtrl, transclude) {
            widgetCtrl.configTransclude = transclude;
        }
    };
})


.directive('teWidgetConfigTransclude', function () {
    return {
        require: '^teWidget',
        link: function (scope, elem, attrs, widgetCtrl) {
            if (!widgetCtrl.configTransclude) return;

            widgetCtrl.configTransclude(scope, function (clone) {
                elem.append(clone);
            });
        }
    };
})


.directive('teWidgetBody', function () {
    return {
        restrict: 'E',
        require: '^teWidget',
        transclude: 'element',
        link: function (scope, elem, attrs, widgetCtrl, transclude) {
            widgetCtrl.bodyTransclude = transclude;
        }
    };
})


.directive('teWidgetBodyTransclude', function () {
    return {
        require: '^teWidget',
        link: function (scope, elem, attrs, widgetCtrl) {
            if (!widgetCtrl.bodyTransclude) return;

            widgetCtrl.bodyTransclude(scope, function (clone) {
                elem.replaceWith(clone);
            });
        }
    };
})


.directive('teWidgetTransclude', function () {
    return {
        restrict: 'E',
        templateUrl: 'widget.html',
        replace: true
    };
})

;

function WidgetCtrl() {

}


})();