Trying to wrap angular directive in another directive

I'm trying to wrap a directive in another directive, and am having an issue. For example, using the UI Bootstrap tabs and pane directive:

I want to turn something like:

<tabs>
    <pane heading="FOO">...</pane>
    <pane heading="BAR">...</pane>
</tabs>

in to:

<tabs>
    <pane-wrapper heading="FOO">...</pane-wrapper>
    <pane-wrapper heading="BAR">...</pane-wrapper>
</tabs>

where pane-wrapper directive looks like:

angular.module('test').directive('paneWrapper', function(){
        return{
            restrict: 'E',
            replace: true,
            template: "<pane ng-transclude></pane>" //somehow need to pass along the heading attribute
        }
    });

The reason I want to do this is because, I don't want to heavily modify pane, I want to wrap it and perhaps have multiple directives in one etc. I suppose I could completely copy the pane directive and change it as one option.

Anyway, I get the error:

Error: Multiple directives [ngTransclude, ngTransclude] asking for 'ngTransclude' controller on <div class='tab-pane' ng-class='active: selected' ng-show='selected' ng-tranclude=''>

Thoughts?

I shouldn't need to create a pane-wrapper scope right? There is a parent scope with various data... I just want to wrap this and create a reusable component.

Have you tried using

iElement.html($compile(<pane..)(scope));

remove the template property and rely on compiling the <pane> and updating iElement html directly.

You might want to use replace: true property in the wrapper directive.