title: angular ngClass evaluation
body: <p>I've been learning AngularJs and have built a very basic Angular app. In one part of the app, I've used <a href="https://docs.angularjs.org/api/ng/directive/ngClass" rel="nofollow">ngClass</a> at a div element like </p>
  
  <pre><code>&lt;div ng-class='{"some class": aFuncTruthyOrFalsy()}'&gt;
  &lt;!-- aFuncTruthyOrFalsy() is defined in the controller for this view--&gt;
  </code></pre>
  
  <p>Now, there's an input element in the view that is non-related to the above element and does not relate at all to any of the values checked in the function above.</p>
  
  <p>I noticed that every whenever I type something in the input field (change event, keypressed event) it causes a re-evaluation of the ngClass. (I've put in a console log inside the aFuncTruthyOrFalsy function). I'm not able to determine which all events are bubbling to cause the reevaluation.</p>
  
  <p>It seems to me that ngClass reevaluates at every single event in the page.</p>
  
  <p><strong>Can anyone please explain/elaborate this behavior?</strong></p>
  
  <p><strong>Is it possible to cache the evaluated class at the initial load of the view?</strong></p>
  
  <p>What if there are multiple ngClass being used in the same view and each of the expression evaluation is delegated to some function that again does some multiple operation to come to get the evaluated expression? </p>