AngularJS ng-repeat colspan rowspan issue

Question

<table border=1>
 <thead>
   <tr>
      <th>Group</th>
      <th>Status</th>
     <th>Name</th>
     <th>Gender</th>          
   </tr>
 </thead>    
 <tbody ng-repeat="group in groups">
   <tr>
     <td rowspan="3">{{group.name}}</td>  
     <td rowspan="3">{{group.status}}</td>        
   </tr>
   <tr ng-repeat="member in group.members">
     <td>{{ member.name }}</td>
     <td>{{ member.gender }}</td>
   </tr>
 </tbody>
</table>

The above code gives the output as below:

I need to make the Status column the 4th column instead of the current 2nd i.e appear after the Gender column. I tried using ng-repeat-start by adding one more tr having the status td but it comes as another row

JS-Bin for the same

Answer 1

Using ng-if checking the $index using modulo (%) for the columns with a rowspan might do the trick: jsbin.com/jaxuvavaba