Использование селектора nth-child на повторяющемся элементе с помощью ng-repeat не сработает

Question

У меня есть модальная форма с табличной структурой, сгенерированная с помощью ng-repeat. Каждая строка в форме содержит компонент angularjs <reorder-row> в качестве своего содержимого. Я не могу найти способ применить селектор nth-child, чтобы я мог чередовать цвет фона для каждой строки в таблице.

Код шаблона для формы, шаблон для компонента показан ниже. Также css.

Сначала я попытался применить селектор к самому элементу <reorder-row> компонента, но он игнорируется, т. Е.

 reorder-row {
   background-color: green;
 }

не действует.

Затем я попытался применить его к контейнеру в шаблоне компонентов, и все строки стали серыми, а не только нечетными.
Если я использую (четные) вместо нечетных, ни одна из строк не будет затронута.

Не уверен, что я должен делать вместо этого.

Это шаблон для модальной формы:

<div id="reorder-accounts-modal">
<div class="title">
    <div>Reorder Accounts</div>
    <a href="" id="dismiss-button" class="glyphicon glyphicon-remove-circle" ng-click="dismiss()"></a>

</div>
<div class="border-line"></div>
<div class="body">
    <div class="note">Classes can only be reordered within their parent account.</div>
    <div></div>
    <div class="reorder-table">  
    --->      <reorder-row  ng-repeat="item in accounts" account="item">**</reorder-row>
     </div>
</div>
<div class="footer">
    <a class="btn" id="never-mind">Never mind</a>
    <a class="btn btn-primary" id="post">Post Changes</a>   
</div>

`

Это шаблон длякомпонент AngularJS

   <div class="reorder-table-row">
       <a class="glyphicon glyphicon-chevron-up"></a>
       <a class="glyphicon glyphicon-chevron-down"></a>
       <div>{{$ctrl.account.name}}</div>
    </div>`

Вот соответствующий CSS

#reorder-accounts-modal .reorder-table {

    height: 280px;
    max-height: 280px;
    overflow-y: scroll;

}


.reorder-table-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    border: solid 1px var(--border-gray);
}

.reorder-table-row:nth-child(odd) {
    background-color: gray;   //Turns all rows gray 
}
reorder-row  {
    background-color: blue;  //ignored.
}

#reorder-accounts-modal #post {
    font-size: 14px;
    width: 173px;
}