title: Recursive directive and infinite loop
body: <p>Looks like I somehow made an infinite loop in AngularJS directive compilation.<br>
  Please help me find out how to fix that.  </p>
  
  <p>Plunker:  <a href="http://plnkr.co/edit/2mvvCGYYYahOcEnWON9k" rel="nofollow">http://plnkr.co/edit/2mvvCGYYYahOcEnWON9k</a>  </p>
  
  <p>Don't press "Run" before reading the code - your browser can stop respond.</p>
  
  <p>Code of directive:</p>
  
  <pre><code>    directive(
    'mlgPermissionCard', function() {
      return {
        templateUrl: 'mlgPermissionCard.html',
        restrict:    'AE',
        scope:       {
          branch: '=mlgPermissionCard'
        }
      };
    })
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;div&gt;
      &lt;div class="pull-right"&gt;&lt;span class="glyphicon glyphicon-cog"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div&gt;{{ branch.name }}&lt;/div&gt;
      &lt;div class="list-group"&gt;
          &lt;div class="list-group-item" ng-repeat="child in branch.children"&gt;--&gt;
              &lt;div mlg-permission-card="child"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong><br>
  Working code of nested directives, maybe will be useful for somebody:<br>
  <a href="https://github.com/MLG/angular-mlg-permission-card" rel="nofollow">https://github.com/MLG/angular-mlg-permission-card</a></p>