title: ng-class class name which contains a scope variable rendered as null
body: <p>I have a  which utilizes classes based on a particular scope variable.</p>
  
  <p>In this case, the scope variable is <strong>{{jobSingle.UserFit.Summary.score}}</strong> which takes on the values of <strong>-1</strong> (when unknown) or <strong>0-10</strong> (when score is known). </p>
  
  <p>The span is rendered with the following code.</p>
  
  <pre><code>&lt;span ng-class="{true: 'fit-score-{{jobSingle.UserFit.Summary.score * 10}}', false: 'fit-score-unknown'}[jobSingle.UserFit.Summary.score &gt; -1]"&gt;
      [Content]
  &lt;/span&gt;
  </code></pre>
  
  <p>However, the class is not populated correctly for when jobSingle.UserFit.Summary.score > -1.</p>
  
  <p>When I inspect the element in the Developer Console, the code is displaying as such.</p>
  
  <pre><code>&lt;span class="fit-score-null" ng-class="{true: 'fit-score-70', false: 'fit-score-unknown'}[jobSingle.UserFit.Summary.score &gt; -1]"&gt;
      [Content]
  &lt;/span&gt;
  </code></pre>
  
  <p>The class that was rendered for the span was 'fit-score-<strong>null</strong>'.</p>
  
  <p><strong>Some other background info:</strong></p>
  
  <p>The above code <strong><em>used to work</em></strong> when I was using mock data defined locally. </p>
  
  <p>However, after having switched my controllers to call live data from an API using <strong>$http</strong>, null started appearing in my class name for the above situation. </p>
  
  <p>All other data apart from the above renders perfectly.</p>
  
  <p>Am I doing something wrong? Many thanks in advance.</p>