title: Angular JS: table with dynamic number of titles
body: <p>I tried to create a table with a dynamic number of titles and sub titles. It should look like this: <a href="https://i.stack.imgur.com/M8uSA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M8uSA.png" alt="enter image description here"></a></p>
  
  <p>Each title has 3 sub titles. But I can not know in advance how much headline I will have.</p>
  
  <p>So in HTML it looks like:</p>
  
  <pre><code>  &lt;table class="table table-hover col-xs-12"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th rowspan="2"&gt;Type ID&lt;/th&gt;
          &lt;th colspan="3" ng-repeat="val in ctrl.vals"&gt;
            &lt;div class="val"&gt;
              &lt;span title="{{val}}"&gt;{{val}}&lt;/span&gt; &lt;!-- this is title --&gt;
            &lt;/div&gt;
           &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="row-header" ng-repeat="val in ctrl.getNumberColumn() track by $index"&gt;{{ $index%3 == 0 ? "subtitle1" : $index%3 == 1 ? "subtitle2" : "subtitle3" }}&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr ng-repeat="key in ctrl.keys"&gt;
          &lt;td class="row-key"&gt;{{key}}&lt;/td&gt;
          &lt;td class="row-value" ng-repeat="val in ctrl.getNumberColumn() track by $index"&gt;
              &lt;div class="list-group" ng-init="data = ctrl.getDataByIndex($index, ctrl.items[key])"&gt;
                &lt;a class="list-group-item" ng-if="$index%3 == 0"&gt;{{data.avg_fps}} &lt;/a&gt;
                &lt;a class="list-group-item" ng-if="$index%3 == 1"&gt;{{data.avg_cpu}} &lt;/a&gt;
                &lt;a class="list-group-item" ng-if="$index%3 == 2"&gt;{{data.session}} &lt;/a&gt;
              &lt;/div&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>I understand that it looks confusing - so I would like to ask - is there an option for more simply constructing such a table?</p>