title: How to do an if-else using ngClass?
body: <p>I am using AngularJS on my site, and have a widget displayed on one of my webpages, and want to change the <code>style</code> element of some text displayed in a <code>div</code> tag depending on whether a boolean value associated with that text is true or false.</p>
  
  <p>An alarm is raised on the web page, and displayed in the widget when an integer variable reaches a certain limit (i.e. when x >= 100, the <code>alarmRaised</code> boolean is set to true). The value of the variable is always displayed on the page, and is being updated every 30 seconds.</p>
  
  <p>When the alarm is raised, a warning is raised (and displayed on a separate page)- the user has the option to accept that warning. When the warning has been accepted, I want the text showing the value of the variable to be displayed in one colour, and when it hasn't, I want to display it in another colour.</p>
  
  <p>The HTML where this 'alarm' text is displayed is inside one of the JS functions for that page:</p>
  
  <pre><code>.directive('tagBox', function($timeout, tag, colourFilter){
      return{
          restrict: 'E',
          scope: {
              ...
          },
          template: ...
              ...
              '&lt;div data-ng-repeat="alarm in alarms" data-ng-class="{\'text-warning\':alarm.accepted.value, \'text-danger\':!alarm.accepted.value}"&gt;{{alarm.message.value}}&lt;/div&gt;'
  </code></pre>
  
  <p>Inside the above <code>&lt;div&gt;&lt;/div&gt;</code> tag, I want to use some in-line JS to say: "if the value of <code>alarm.accepted.value</code> is true, display the value of <code>alarm.message.value</code> in one colour; if it's false, display it in another colour... How would I do this? </p>