AngularJS - Transclusion Containing Transclusion?

I am using Bootstrap UI's accordion directive. This uses transclusion under the hood. I have some logic that needs repeated, so I am trying to create a directive that wraps the accordian, which also uses transclusion.

<div>
    <div accordion>
        <div accordion-group is-open="isOpen">
            <div accordion-heading>
                <span class="glyphicon" ng-class="{'glyphicon-minus-sign': isOpen, 'glyphicon-plus-sign': !isOpen}"></span>
                <strong>{{headerTitle}}</strong>
            </div>
            <div ng-transclude></div>
        </div>
    </div>
</div>

Here is the JavaScript:

application.directive('collapsePanel', ['baseUrl', function (baseUrl) {
    return {
        restrict: 'A',
        templateUrl: baseUrl + 'content/templates/collapse_panel.html',
        replace: true,
        transclude: true,
        scope: {
            headerTitle: '@'
        },
        controller: ['$scope', function ($scope) {
            $scope.isOpen = false;
        }]
    };
}]);

It should be as simple to use as:

<div collapse-panel header-title="Title">
    {{scopeVariable}}
</div>

Assuming scopeVariable is in my controller, I would think its value would appear. From what I can tell, the scope belongs to the collapse-panel rather than the outer scope. It is almost like having nested transclusion directives is causing my problem.

Is there a trick to nesting transclusions like this?