title: AngularJS ng-repeat colspan rowspan issue
body: <pre><code>&lt;table border=1&gt;
   &lt;thead&gt;
     &lt;tr&gt;
        &lt;th&gt;Group&lt;/th&gt;
        &lt;th&gt;Status&lt;/th&gt;
       &lt;th&gt;Name&lt;/th&gt;
       &lt;th&gt;Gender&lt;/th&gt;          
     &lt;/tr&gt;
   &lt;/thead&gt;    
   &lt;tbody ng-repeat="group in groups"&gt;
     &lt;tr&gt;
       &lt;td rowspan="3"&gt;{{group.name}}&lt;/td&gt;  
       &lt;td rowspan="3"&gt;{{group.status}}&lt;/td&gt;        
     &lt;/tr&gt;
     &lt;tr ng-repeat="member in group.members"&gt;
       &lt;td&gt;{{ member.name }}&lt;/td&gt;
       &lt;td&gt;{{ member.gender }}&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The above code gives the output as below:</p>
  
  <p><img src="https://i.stack.imgur.com/c31P3.jpg" alt="enter image description here"></p>
  
  <p>I need to make the <code>Status</code> column the 4th column instead of the current 2nd i.e appear after the <code>Gender</code> column. I tried using ng-repeat-start by adding one more <code>tr</code> having the status <code>td</code> but it comes as another row</p>
  
  <p><a href="http://jsbin.com/wakuludopo/2/" rel="nofollow noreferrer" title="JSBin">JS-Bin</a> for the same</p>