Using ternary operator in HTML to decide on the class to be implemented
<p>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.</p>

<pre class="lang-html prettyprint-override"><code>&lt;td class="col-md-6"&gt;&lt;span class="form-control-static cdr-details-td" /&gt;
  &lt;span class="(('1' === '-1') ? version-modal-header : failure)"&gt;{{cdr.causeCode}}&lt;/span&gt; 
&lt;/td&gt;
</code></pre>

<p>CSS for the same:</p>

<pre class="lang-css prettyprint-override"><code>.version-modal-header {
  background-color: #000000;
}
.failure {
  color: #ff0000;
  font-weight: bold;
}
</code></pre>