Nested Transclusion

[hleise]

How would this be used with nested transclusion? For example:

app.html:

<my-component>
    <p>Hello world</p>
</my-component>

myComponent html template:

<split direction="horizontal" ng-transclude>
    <split-area size="50" ng-transclude>
        <div ng-transclude></div>
    </split-area>
    <split-area size="50" ng-transclude>
        <p>Hola mundo</p>
    </split-area>
</split>

The idea is that "Hello world" should be placed in the div of the first split-area tag, however, I keep getting an ng-transclude orphan error: https://docs.angularjs.org/error/ngTransclude/orphan?p0=%3Cdiv%20ng-transclude%3D%22%22%20class%3D%22ng-scope%22%3E

The error page mentions including "transclude: true" in the component declaration, but I've already done that. Any idea how to make this work?