title: Render a directive inside another directive (within repeater template)
body: <p>I am trying to render a directive inside another directive (not sure if the repeater inside the template is working this), and it seems to just output as text rather than compiling the directive (plunker code here: <a href="http://plnkr.co/edit/IRsNK9" rel="noreferrer">http://plnkr.co/edit/IRsNK9</a>)</p>
  
  <p>Any ideas on how I can actually get it to render properly my-dir-one, my-dir-two, my-dir-three directives inside the repeater?</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker" &gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;script id="partials/addressform.html" type="text/ng-template"&gt;
        partial of type {{type}}&lt;br&gt;
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div container&gt;&lt;/div&gt;
  
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
    &lt;b&gt;Below is just to test the directives are actually usable outside the repeater&lt;/b&gt;
    &lt;div my-dir-one&gt;&lt;/div&gt;
    &lt;div my-dir-two&gt;&lt;/div&gt;
    &lt;div my-dir-three&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.directive('container', function () {
  
    return {
          restrict: 'A',
          scope: {},
          replace: true,
  
          template: '&lt;div class="views"&gt;' +
                    '    &lt;div class="view" ng-repeat="view in views"&gt;' +
                    '        &lt;div {{view.dir}}&gt;{{view.dir}}&lt;/div&gt;' +
                    '    &lt;/div&gt;' +
                    '&lt;/div&gt;',
  
          link: function (scope, elm) {
  
              scope.views = [
          { dir: 'my-dir-one' },
          { dir: 'my-dir-two' },
          { dir: 'my-dir-three' }
        ];
          }
      }
  });
  
  app.directive('myDirOne', function () {
    return {
      restrict: 'A',
      scope: {},
      replace: true,
      template: '&lt;div&gt;This is directive one.&lt;/div&gt;'
    }
  });
  
  app.directive('myDirTwo', function () {
    return {
      restrict: 'A',
      scope: {},
      replace: true,
      template: '&lt;div&gt;This is directive two.&lt;/div&gt;'
    }
  });
  
  app.directive('myDirThree', function () {
    return {
      restrict: 'A',
      scope: {},
      replace: true,
      template: '&lt;div&gt;This is directive three.&lt;/div&gt;'
    }
  });
  </code></pre>