AngularJS isolated directive with ng-repeat breaks transclusion scope

Question

I'd really appreciate some understanding of this scoping issue I encountered while developing a transcluded isolated directive, one where the transclusion is repeated inside the template.

I promise that I do already understand how both isolated and transclusion scopes work, and I've searched the web for an answer already. :)

What I'm finding here is that, when not using a repeat, my transcluded html can access to the parent scope (as I would expected, as the transcluded scope is a sibling of the parent scope).

However the moment I change my template to repeat the transclusion, the parent scope is no longer accessible to the transcluded html.

I'm sure there's a good reason for this, but for the life of me I can't put my finger on it.

Please see an example plunker here - it will explain what I'm referring to better than words can.

Answer 1

What happens with ng-repeat is that the transcluded scope (00A below) becomes a child of the ng-repeat scope (009), rather than a child of the controller scope (003).

(Right-click on the image and open it in a new tab to see it better.)

Since there is no dashed line from isolate scope 006 to controller scope 003, transcluded scope 00A can't find outer using prototypal inheritance chaining/lookup.

(Scopes 004 and 005 are created by the working directive. Transcluded scope 005 can find outer using prototypal inheritance.)