Стиль ng-класса не применяется

Question

Я обновляю цвет текста внутри тега div, основываясь на значении массива внутри ng-repeat. это значение правильно установлено при отладке, но цвет не установлен правильно.

<div ng-class="sel.fav == 'Y' ? 'fz-horse-name-green' : 'fz-horse-name'">{{sel.sel_name}} : {{sel.fav}}</div> 

и мой класс КСС:

.fz-horse-name-green{ 
    display: table-cell; 
    width: 40%; 
    text-align: left; 
    font-family: 'Oswald', sans-serif !important; 
    font-size: 220%; 
    font-size: 2.2vw; 
    color: limegreen !important; 
    padding-left: 2%; 
} 
.fz-horse-name{ 
    display: table-cell; 
    width: 40%; 
    text-align: left; 
    font-family: 'Oswald', sans-serif; 
    font-size: 220%; 
    font-size: 2.2vw; 
    color: white; 
    padding-left: 2%; 
} 

и значение, которое я проверил внутри класса

sel.fav печатает "Y" правильно внутри же DIV, но в CSS цвет не появляется, даже я добавил «! important».

, когда я смотрю на HTML-фрагмент в режиме разработчика хром, он показывает, как показано ниже:

<div ng-class="sel.fav == 'Y' ? 'fz-horse-name-green' : 'fz-horse-name'" class="ng-binding fz-horse-name-green">TOYNEBEE : Y</div> 

, что означает, что правильный класс уже применяется правильно? что может быть проблемой, не применяя мой CSS/не изменяя цвет текста правильно на основе условия?

Я создал образец fiddle, и он отлично работает. Интересно, почему фактический не работает?

http://plnkr.co/edit/XhaxncmzzNFXmZryKkyr?p=preview

Answer 1

Деталь должен всегда иметь fz-horse-name класс

.fz-horse-name{ 
    display: table-cell; 
    width: 40%; 
    text-align: left; 
    font-family: 'Oswald', sans-serif; 
    font-size: 220%; 
    font-size: 2.2vw; 
    color: white; 
    padding-left: 2%; 
} 

fav класс должен просто изменить существующий класс

.fz-horse-name.fav{ 
    color: limegreen; 
} 

Затем вы можете добавить fav класс, если условие истинно

<div class="fz-horse-name" ng-class="{'fav': (sel.fav == 'Y')}"> 
    {{sel.sel_name}} : {{sel.fav}} 
</div>