title: ngRepeat on custom directive tags
body: <p>I have a list of custom directives which are different widgets on my dashboard. The directives are defined as follows:</p>
  
  <pre><code>angular.module('core').directive('graphCardWidget', function() {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              target: '=target'
          },
          templateUrl: 'modules/core/widgets/graph-card.client.widget.html'
      };
  });
  
  angular.module('core').directive('pieChartWidget', function() {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              target: '=target'
          },
          templateUrl: 'modules/core/widgets/pie-chart.client.widget.html'
      };
  });
  </code></pre>
  
  <p>In my controller, I have a list of widgets to be displayed. The list is as follows:</p>
  
  <pre><code>$scope.dashboardWidgets = [
          {
              directive : 'graph-card-widget',
              target : 'widgets.dashboards.activeDevicesCard'
          },
          {
              directive : 'graph-card-widget',
              target : 'widgets.dashboards.activeSessionsCard'
          },
          {
              directive : 'pie-chart-widget',
              target : 'widgets.dashboards.devices'
          },
          {
              directive : 'pie-chart-widget',
              target : 'widgets.dashboards.sessions'
          }
      ];
  </code></pre>
  
  <p>Now in my view, I use <code>ng-repeat</code> to iterate this array and display the items. Here is the code of my view:</p>
  
  <pre><code>&lt;div layout="row" layout-wrap layout-align="center" layout-xs="column" ng-drop="true"&gt;
      &lt;div ng-repeat='widget in dashboardWidgets'&gt;
          &lt;{{widget.directive}} ng-drag="true" flex='45' target='{{widget.target}}'&gt;
          &lt;/{{widget.directive}}&gt;
          &lt;span flex='5'&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the browser renders this as text. Here is what I get in my DOM:</p>
  
  <pre><code>&lt;div layout="row" layout-wrap="" layout-align="center" layout-xs="column" ng-drop="true" class="layout-wrap layout-xs-column layout-align-center-stretch layout-row"&gt;
      &lt;div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope"&gt;
          “&lt;graph-card-widget ng-drag="true" flex='45' target='widgets.dashboards.activeDevicesCard’&gt;”
          &lt;span flex="5" class="flex-5"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope"&gt;
          “&lt;graph-card-widget ng-drag="true" flex='45' target='widgets.dashboards.activeSessionsCard’&gt;”
          &lt;span flex="5" class="flex-5"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope"&gt;
          “&lt;pie-chart-widget ng-drag="true" flex='45' target='widgets.dashboards.devices’&gt;”
          &lt;span flex="5" class="flex-5"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div ng-repeat="widget in dashboardWidgets" class="ng-binding ng-scope"&gt;
          “&lt;pie-chart-widget ng-drag="true" flex='45' target='widgets.dashboards.sessions’&gt;”
          &lt;span flex="5" class="flex-5"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So what can I do to make the directive rendered as a tag and not plain text?</p>
  
  <p>I saw a couple of questions similar to these such as, <a href="https://stackoverflow.com/questions/16264534/dynamically-adding-directives-in-ng-repeat">question 1</a>, <a href="https://stackoverflow.com/questions/18600710/angularjs-ng-repeat-with-custom-element-inside-a-table-is-rendering-strangely">question 2</a> but they all are adding the dynamic directives in standard HTML tags. What I need is a dynamic tag.</p>
  
  <p><strong>Update:</strong> </p>
  
  <p>After following @cnexans answer, I got it working partially. The widget is drawn but the <code>target</code> attribute is not evaluated which leads to a blank widget.
  Here's the plunkr with the issue: <a href="https://plnkr.co/edit/BGN6C4LAHguWthU4fGy0?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/BGN6C4LAHguWthU4fGy0?p=preview</a></p>