Rendering part of component outside of the component itself

Question

I have JSFiddle like this: https://jsfiddle.net/ownvjjow/

Basically the problem is that I'd like to render some part of component x outside of the element(x) itself. Like in the outer scope, but with preserving the scope of it in other component(y). I have part of the component that may be wanted to be rendered with targetElement set, but it seems like ng-repeat have some problem with it. The fiddle returns some other error, the one I get in my app is: I could propably break the part that I want to be "moving" as another component then conditionally render it in other place providing the bindings: {... , controller: '<'} then expose the scope from component x to the x.y but I was wondering if there is an option to compile this part of component x and inject it in other place with everything working correctly.

I am not sure if my approach is right or maybe I should think about something different, if you know any other solution/idea then I would be grateful if you let me know about it.

Answer 1

fiddle

if(this.options.targetElement) {
  var parentElem = angular.element((this.options.targetElement));
  var childElem = $compile(this.container)($scope)[0];
  $timeout( function(){
        parentElem.append(childElem);
  }, 0, false );
  }

This will give AngularJS time to finish its compile.

Hope this help.