title: AngularJS ngClass conditional
body: <p>Is there any way to make an expression for something like <a href="https://docs.angularjs.org/api/ng/directive/ngClass" rel="noreferrer"><code>ng-class</code></a> to be a conditional?</p>
  
  <p>For example, I have tried the following:</p>
  
  <pre><code>&lt;span ng-class="{test: 'obj.value1 == \'someothervalue\''}"&gt;test&lt;/span&gt;
  </code></pre>
  
  <p>The issue with this code is that no matter what <code>obj.value1</code> is, the class test is always applied to the element. Doing this:</p>
  
  <pre><code>&lt;span ng-class="{test: obj.value2}"&gt;test&lt;/span&gt;
  </code></pre>
  
  <p>As long as <code>obj.value2</code> does not equal a truthy value, the class in not applied.  Now I can work around the issue in the first example by doing this:</p>
  
  <pre><code>&lt;span ng-class="{test: checkValue1()}"&gt;test&lt;/span&gt;
  </code></pre>
  
  <p>Where the <code>checkValue1</code> function looks like this:</p>
  
  <pre><code>$scope.checkValue1 = function() {
    return $scope.obj.value === 'somevalue';
  }
  </code></pre>
  
  <p>I am just wondering if this is how <code>ng-class</code> is supposed to work.  I am also building a custom directive where I would like to do something similar to this. However, I can't find a way to watch an expression (and maybe that is impossible and the reason why it works like this).</p>
  
  <p>Here is a <a href="http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview" rel="noreferrer">plnkr</a> to show what I mean.</p>