AngularJS: Why does this delegated ng-repeat not work inside a transclusion? <p>Okay, this may seem somewhat esoteric, but I am trying to solve a particular issue with a directive I have written: <a href="https://github.com/michaelbromley/angularUtils/issues/37" rel="nofollow">https://github.com/michaelbromley/angularUtils/issues/37</a></p> <p>Here is a simplified version of what is going on. </p> <h3>This works:</h3> <p>I have a directive that delegates to ng-repeat by dynamically adding an <code>ng-repeat</code> attribute to the element during the compile stage, and then compiles that element:</p> <pre><code>myApp.directive('repeatDelegator', function($compile, $timeout) { return { compile: function(element, attrs){ attrs.$set('ngRepeat', attrs.repeatDelegator); //Add ng-repeat to the dom element.removeAttr('repeat-delegator'); // remove the repeat-delegator to prevent infinite recursion of compilation var compiled = $compile(element, null); return function(scope, element, attrs){ compiled(scope); }; } } }); </code></pre> <p>This is how the directive is called:</p> <pre><code>&lt;ul&gt; &lt;li repeat-delegator="item in items"&gt;{{item}}&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>This works fine - see the first example here: <a href="http://plnkr.co/edit/oWd3rGAulsxoeSqffxMU?p=preview" rel="nofollow">http://plnkr.co/edit/oWd3rGAulsxoeSqffxMU?p=preview</a></p> <p>However, when the <code>repeat-delegator</code> is put inside any other directive that uses transclusion, it does not work.</p> <h3>This does not work. Why?</h3> <p>Here is a basic directive that does nothing but causes transclusion:</p> <pre><code>myApp.directive('transcluder', function() { return { restrict: 'AE', transclude: true, scope: {}, template: '&lt;div ng-transclude&gt;&lt;/div&gt;' }; }); </code></pre> <p>So when we call the <code>repeat-delegator</code> directive inside this transclusion, it fails and nothing shows up:</p> <pre><code>&lt;transcluder&gt; &lt;ul&gt; &lt;li repeat-delegator="meal in meals"&gt;{{meal}}&lt;/li&gt; &lt;/ul&gt; &lt;/transcluder&gt; </code></pre> <p>This is illustrated in the second example: <a href="http://plnkr.co/edit/oWd3rGAulsxoeSqffxMU?p=preview" rel="nofollow">http://plnkr.co/edit/oWd3rGAulsxoeSqffxMU?p=preview</a></p> <h3>What I know so far:</h3> <p>I have spent some hours stepping through the Angular.js source as this executes to try to figure out why it fails inside the transclusion, but I can't get to the bottom of it.</p> <p>In the broken (transcluded) version, when I see the ngRepeat being compiled, the $scope seems to be correct (it is a child $scope of the main controller $scope, since the transclusion causes a new child $scope to be created). You can write "scope.items" in the console and see the list of items.</p> <p>I am guessing something like this is happening:</p> <ul> <li>The transcluder directive is compiled first because it is higher in the DOM tree, so it is encountered first.</li> <li>The transclusion causes the directive's child nodes to be removed from the DOM and cloned into the <code>$template</code> var, for later insertion back into the DOM.</li> <li>Perhaps this causes the <code>ng-repeat</code> to compile against a <em>clone</em> of the <code>&lt;li&gt;..&lt;/li&gt;</code> node, which never actually gets attached back to the DOM?</li> </ul> <p>I'm not sure though. It's a really tricky problem, and any help would be very much appreciated!</p>