Nested transclude within Web Component (AngularElement)

Question

I am trying to mix up Angular and AngularJS using AngularElement

I know about ngUpgrade, and I do not want to use it

The basic idea is to replace some AngularJS components progressively without modifying all the code at once. Thus, I have a library of AngularJS library, and I try to see what are the limit to transform it as a Angular wrapper.

I have created a component in Angular:

<div>
    <div class="test1">
        <ng-content select="[test1]"></ng-content>
    </div>
</div>

I use AngularElement to be able to use the component in Angular JS with the tag <test-element>

Then, I have the component in AngularJS

<div>
    <js-component>
        <test-js>Hello World</test-js>
    </js-component>
</div>

The js-component is the AngularJS Wrapper I wanna use. Thus, to connect the transclude part of AngularJS and Angular I made:

<test-element>
    <span test1>
        <div ng-transclude="testJs"></div>
    </span>
</test-element>

So far, I also tried different options

• by investing the span and the div of my js-component.
• Using only one DOM element with both test1 and ng-transclude="testJs"
• Adding the ng-transclude at some other place in the component and moving it using JS Script. None of the options work. The current one (the first one presented above) raises an issue with $timeout of AngularJS (probably at refresh time of the window?) The current issue is about linking

In this context, I work with Angular and AngularJS, but it is similar I think to AngularJS and WebComponent.

Do you know if it is possible to use nested transclusion from AngularJS to a WebComponent that will transclude the result into its own context (the solution can imply more components and JS code)