title: Dynamic class in Angular.js
body: <p>I want to dynamically add a css class to an <code>&lt;li&gt;</code> element I am looping over.
  The loop is like this:</p>
  
  <pre><code>&lt;li ng-repeat="todo in todos" ng-class="{{todo.priority}}"&gt;
    &lt;a href="#/todos/{{todo.id}}"&gt;{{todo.title}}&lt;/a&gt;
    &lt;p&gt;{{todo.description}}&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>In my todo model, I have the property priority which can be "urgent", "not-so-important" or "normal" and I just want to assign the class for each element.</p>
  
  <p>I know I can do this for a boolean with something like <code>ng-class="{'urgent': todo.urgent}"</code> 
  But my variable is not a boolean, but has three values.
  How would I do this?
  Note also that I do not want to use <code>ng-style="..."</code> since my class will alter several visual things.</p>