Bootstrap table with nested ng-repeat striped-rows

Question

I have a table for which should display striped rows, but since I have nested ng-repeats, my output has groups of rows colored the same instead of striped. Any way to get the output I'm looking for?

<table class="table table-striped table-bordered table-hover table-condensed">  
 <tr ng-repeat-start="thing in app.things">
  <td>{{thing.label}}</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr ng-repeat-start="action in thing.actions">
  <td>{{thing.label}}</td>
  <td>{{action.label}}</td>
  <td>&nbsp</td>
 </tr>
 <tr ng-repeat-end ng-repeat="task in action.tasks">
  <td>{{thing.label}}</td>
  <td>{{action.label}}</td>
  <td>{{task.label}}</td>
 </tr>
 <tr ng-repeat-end></tr></tr>
</table>

Answer 1

First Option - Using CSS:

.table-striped > tbody > tr:nth-child(odd) > td {
    background-color: #000;
}

.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #F00;
}

Second Option - Using CSS and Angular JS use the ng-class-odd="odd" and ng-class-even="even" to add a css class to each tablerow, for example:

 <tr ng-repeat-start="action in thing.actions" ng-class-odd="odd" ng-class-even="even">
      <td>{{thing.label}}</td>
      <td>{{action.label}}</td>
      <td>&nbsp</td>
 </tr>

And your CSS add the odd and even class, for example:

.odd { background-color: #000; }
.even { background-color: #F00; }

I hope help you.