Angularjs using ng-repeat with <th> tag for repetitive column headers
<p>I'm trying to create a table with multiple rows and one of the rows containing repetitive column headers like below.</p>

<p>I'm not sure how to use <code>ng-repeat</code> in <code>angularjs</code> to create these headers. I tried putting <code>ng-repeat</code> in <code>&lt;tr&gt;</code> element which obviously won't work as it creates multiples rows.</p>

<p>I also tried putting it in a <code>&lt;th&gt;</code> element but the headers won't appear alternatively.</p>

<p>I want to use <code>ng-repeat</code> (to display Current and Prior headers) rather than manually typing them like in the code below because number of times the the repetitive columns appear is dynamic (dependent on row 1).</p>

<pre><code>&lt;thead&gt;
    &lt;tr&gt;
        &lt;th id="item" scope="colgroup" style="text-align:center" rowspan="2"&gt;Items&lt;/th&gt;
        &lt;th ng-repeat="year in years()" id={{year}} scope="colgroup" style="text-align:center" colspan="2"&gt;
            {{ year }}
        &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
            &lt;th  id="{{year}}planning" scope="col" class="tsub-head"&gt;Current&lt;/th&gt;
            &lt;th  id="{{year}}reporting" scope="col" class="tsub-head"&gt;Prior&lt;/th&gt;
            &lt;th  id="{{year}}planning" scope="col" class="tsub-head"&gt;Current&lt;/th&gt;
            &lt;th  id="{{year}}reporting" scope="col" class="tsub-head"&gt;Prior&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/LweDd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LweDd.png" alt="enter image description here"></a></p>