title: Issue using ng-class in angularJs
body: <p>I'm working in an application using angularJs and Bootstrap. I need to display the title of a 'scenario' but changing the Css depending on the status of the scenario and displaying a different icon.</p>
  
  <p>In the beginning I tried this</p>
  
  <pre><code>&lt;span class="text-success" data-ng-if="scenario.status=='success'"&gt;&lt;i class="fa fa-check-circle"&gt;&lt;/i&gt;Scenario {{scenario.title}}&lt;/span&gt;
  &lt;span class="text-danger" data-ng-if="scenario.status=='fail'"&gt;&lt;i class="fa fa-exclamation-circle"&gt;&lt;/i&gt;Scenario {{scenario.title}}&lt;/span&gt;
  &lt;span data-ng-if="scenario.status=='none'"&gt;Scenario {{scenario.title}}&lt;/span&gt;
  </code></pre>
  
  <p>Which is working fine.
  But I would like to do it in a more proper way and avoid the duplication of the code so I would like to use ng-class, I have modified the code as following:</p>
  
  <pre><code> &lt;span ng-class="{text-success:scenario.status=='success' || text-danger:scenario.status=='fail'}"&gt;Scenario {{scenario.title}}
                          &lt;i ng-class="{fa fa-check-circle:scenario.status=='success' || fa fa-exclamation-circle:scenario.status=='fail'}"&gt;&lt;/i&gt;
                          &lt;/span&gt;
  </code></pre>
  
  <p>However this way is not working and I don't see what is the problem. Could someone please help me? </p>
  
  <p>Thank you!</p>