Using ternary operator in HTML to decide on the class to be implemented

Issue

I want to decide on a CSS class dynamically using ternary operator in HTML. I'm using following code but it seems the condition isn't being evaluated at all. Whatever class that is written in the true part of the condition, is applied. How can I apply a particular class based on some condition? Any alternative approach will be helpful too.

<td class="col-md-6"><span class="form-control-static cdr-details-td" />
  <span class="(('1' === '-1') ? version-modal-header : failure)">{{cdr.causeCode}}</span> 
</td>

CSS for the same:

.version-modal-header {
  background-color: #000000;
}
.failure {
  color: #ff0000;
  font-weight: bold;
}

Solution

Use ng-class instead

ng-class="{'version-modal-header': condition, 'failure': !condition}"

You can also use a ternary if you want

ng-class="condition ? 'version-modal-header' : 'failure'"

Answered By - Phil