title: Is there any way to assign ng-controller dynamically when iterate over an collection of objects?
body: <p><em>Using angular 1.6.6 and ui-bootstrap 2.5.0</em></p>
  <h3>I'm trying to use a controller if the action property value is not null.</h3>
  <p>The logic for each of my tabs is very different so that I don't want to put all tabs in a single controller. Is there any way for this problem?</p>
  <p><strong>Actions</strong></p>
  <pre><code>$scope.actions = [
      {
          slug: &quot;basicData&quot;,
          title: &quot;Grunddata&quot;,
          icon: &quot;fa fa-table&quot;,
          template: templatePath + &quot;basicData.html&quot;,
          disabled: false,
          controller: null
      }, {
          slug: &quot;responsible&quot;,
          title: &quot;Ansvariga&quot;,
          icon: &quot;fa fa-address-book-o&quot;,
          template: templatePath + &quot;responsible.html&quot;,
          disabled: false,
          controller: null
      }, {
          slug: &quot;reportTime&quot;,
          title: &quot;Rapportera tid&quot;,
          icon: &quot;fa fa-clock-o&quot;,
          template: templatePath + &quot;reportTime.html&quot;,
          disabled: false,
          controller: &quot;ActivityTimeReportingController&quot;
      }
  </code></pre>
  <p>];</p>
  <p><strong>Here's my tabset</strong></p>
  <pre><code>&lt;uib-tabset active=&quot;activePill&quot; vertical=&quot;true&quot; type=&quot;pills&quot;&gt;
              &lt;uib-tab ng-repeat=&quot;action in actions&quot; index=&quot;$index+1&quot; disable=&quot;action.disabled&quot;&gt;
                  &lt;uib-tab-heading&gt;
                      &lt;span class='{{action.icon}}'&gt;&lt;/span&gt;&amp;nbsp;{{action.title}}
                  &lt;/uib-tab-heading&gt;
                  &lt;div ng-include=&quot;action.template&quot; ng-if=&quot;!action.controller&quot; ng-controller=&quot;action.controller&quot;&gt;&lt;/div&gt;
                  &lt;div ng-include=&quot;action.template&quot; ng-if=&quot;action.controller&quot;&gt;&lt;/div&gt;
              &lt;/uib-tab&gt;
          &lt;/uib-tabset&gt;
  </code></pre>
  <p>I get the following error</p>
  <blockquote>
  <p>The controller with the name 'action.controller' is not registered.</p>
  </blockquote>
  <p>Curly brackets does not make any difference.</p>
  <p>I have tried using a function aswell:</p>
  <pre><code>    $scope.getController = function (controllerName) {
      return controllerName.ToString();
  };
  </code></pre>
  <p>And in my tabset:</p>
  <pre><code>&lt;div ng-include=&quot;action.template&quot; ng-if=&quot;!action.controller&quot; ng-controller=&quot;getController(action.controller)&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>With the same error message</p>
  <blockquote>
  <p>The controller with the name 'getController(action.controller' is not registered.</p>
  </blockquote>
  <p>Is there any way to assign ng-controller dynamically when iterate over an collection of objects?</p>