title: Change the color of a glyphicon, based on different values
body: <p>I am using angularjs and I used ng-repeat to loop and show the details in the table.
  In the last column I want to show the glyphicon 'glyphicon glyphicon-stop' in a certain color.</p>
  
  <pre><code>&lt;tr ng-repeat="ps in $ctrl.personLst"&gt;
  &lt;td&gt;{{ ps.id}}&lt;/td&gt;
  &lt;td&gt;{{ ps.birthday | date: 'dd.MM.yyyy'}}&lt;/td&gt;
  &lt;td&gt;{{ ps.age }}&lt;/td&gt;
  &lt;td&gt;{{ ps.country }}&lt;/td&gt;
  &lt;td&gt;{{ ps.continent }}&lt;/td&gt;
  &lt;td&gt; //TODO &lt;td&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.color-green {
    color: green;
  }
  
  .color-blue {
    color: yellow;
  }
  
  .color-red {
    color: red;
  }
  </code></pre>
  
  <ul>
  <li>RED
  
  <ul>
  <li>Age over 30, Country 'GER' and continent 1</li>
  </ul></li>
  <li>BLUE
  
  <ul>
  <li>Age unter 30, Country 'RS' and continent 1</li>
  </ul></li>
  <li>GREEN
  
  <ul>
  <li>Age unter 10, Country 'TS' and continent 3</li>
  </ul></li>
  </ul>
  
  <p>How can I make this possible?
  This was the last thing I tried, nothing was shown:</p>
  
  <pre><code>&lt;td&gt;&lt;span class="glyphicon glyphicon-stop" ng-class="{'color-red': ps.age &gt; 30 &amp;&amp; ps.country === 'GER' &amp;&amp; ps.continent === 1}" &gt;&lt;/span&gt;&lt;/td&gt;
  </code></pre>