Illegal use of ngTransclude directive in the template! when doing transclusion manually
<p>I preciously asked on SO if it was possible to transclude the inner contents of a directive twice in the directive template (clone it and insert it in two places in the template).</p>

<p>A very helpful person helped me put this plunkr together.</p>

<p><a href="http://plnkr.co/edit/k2UB1o4CTHtZ1voS0OKN?p=preview" rel="nofollow">http://plnkr.co/edit/k2UB1o4CTHtZ1voS0OKN?p=preview</a></p>

<p>It seems to work at first. The problem comes when I use any child element which uses transclusion itself. The error I get is...</p>

<p><strong>[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: </strong></p>

<p>For example I have a button directive with the following definition.</p>

<pre><code>angular.module('s4p.directives').directive('s4pButton', function () {

    return {
        restrict: 'E',
        scope: {
            icon: '@'
        },
        transclude: true,
        replace: true,
        template: getTemplate
    };

    function getTemplate(element, attr) {

        var btnType = (typeof attr.type === 'undefined') ? 'button' : attr.type;

        return  '&lt;button s4p-button type="' + btnType + '"&gt;'+
                    '&lt;s4p-button-content ng-transclude&gt;&lt;/s4p-button-content&gt;'+
                    '&lt;s4p-button-icon ng-if="icon"&gt;'+
                        '&lt;s4p-icon href="{{icon}}"&gt;&lt;/s4p-icon&gt;'+
                    '&lt;/s4p-button-icon&gt;'+
                '&lt;/button&gt;';
    }

});
</code></pre>

<p>as soon as I put one of my buttons inside the tool bar and it tries to clone it I get the above error.</p>

<p><strong>EDIT:</strong></p>

<p>New PLUNKR with full example</p>

<p><a href="http://plnkr.co/edit/uK8r4EA2IPRnYKfjWNVG?p=preview" rel="nofollow">http://plnkr.co/edit/uK8r4EA2IPRnYKfjWNVG?p=preview</a></p>

<p>Any help would be greatly appreciated.</p>