title: AngularJS - How to add multiple ng-class directives?
body: <p>Here are 2 different ways to use the <code>ng-class</code> directive.  I need them both, on the same element, but that doesn't work.</p>
  
  <h1>Using an object in ng-class</h1>
  
  <p><a href="http://plnkr.co/edit/uZNK7I?p=preview">http://plnkr.co/edit/uZNK7I?p=preview</a></p>
  
  <pre><code>&lt;div ng-repeat="item in [1, 2, 3, 4, 5]" 
       ng-class="{ first: $first, last: $last }"&gt;{{item}}&lt;/div&gt;
  </code></pre>
  
  <p>correctly results in</p>
  
  <pre><code>&lt;div class="first"&gt;1&lt;/div&gt;
  &lt;div&gt;2&lt;/div&gt;
  &lt;div&gt;3&lt;/div&gt;
  &lt;div&gt;4&lt;/div&gt;
  &lt;div class="last"&gt;5&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h1>Using an expression in ng-class</h1>
  
  <p><a href="http://plnkr.co/edit/tp6lgR?p=preview">http://plnkr.co/edit/tp6lgR?p=preview</a></p>
  
  <pre><code>&lt;div ng-repeat="item in [1, 2, 3, 4, 5]" 
       ng-class=" 'count-' + ($index + 1) "&gt;{{item}}&lt;/div&gt;
  </code></pre>
  
  <p>correctly results in </p>
  
  <pre><code>&lt;div class="count-1"&gt;1&lt;/div&gt;
  &lt;div class="count-2"&gt;2&lt;/div&gt;
  &lt;div class="count-3"&gt;3&lt;/div&gt;
  &lt;div class="count-4"&gt;4&lt;/div&gt;
  &lt;div class="count-5"&gt;5&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h1>Now, how about use them together?</h1>
  
  <p>I need dynamic class names (like <code>'count-' + n</code>), but also need the object syntax for multiple classes.</p>
  
  <p>I can't just use 2 <code>ng-class</code> attributes (<a href="http://plnkr.co/edit/OLaYke?p=preview">http://plnkr.co/edit/OLaYke?p=preview</a>), only the first one works.</p>
  
  <p><strong>Any suggestions?</strong></p>