title: ng-class not overriding class as expected
body: <p>I have a list of icons that are either "on" or "off" depending on boolean values in the $scope. I created two CSS classes -- clrOn and clrOff -- and they are only different colors. I am assigning all of the icons clrOff using class="" and then trying to override that with ng-class="" if the boolean is true.</p>
  
  <p>Based on my research, this is what I have that should work. 
  <a href="http://plnkr.co/edit/W2fFxkt0oGcp7AUBbX6U?p=preview" rel="noreferrer">plunker</a></p>
  
  <p>CSS FILE:</p>
  
  <pre><code>.clrOn { color: #333333; }
  .clrOff { color: #DDDDDD; }
  </code></pre>
  
  <p>JS FILE:</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
    $scope.attachments = 1;
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
      &lt;span class="clrOff" 
            tooltip="Attachments" 
            ng-class="{ 'clrOn' : app.attachments }"&gt;
            TEST
      &lt;/span&gt;
    &lt;/body&gt;
  </code></pre>