title: How do I apply an AngularJS directive based on a class set by ng-class?
body: <p>I'm trying to conditionally apply a directive to an element based on its class.</p>
  
  <p>Here's a simple case of my issue, <a href="http://jsfiddle.net/ZDTab/5/">see the results in this fiddle</a>. For this example, I'm using the map of class names to booleans form of <code>ng-class</code> with <code>true</code>; in my actual case I'd like to use the boolean result of a function.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div ng-app="example"&gt;
    &lt;div class="testcase"&gt;
      This will have the directive applied as I expect
    &lt;/div&gt;
    &lt;div ng-class="{'testcase':true}"&gt;
      This will not have the directive applied but I expect it to
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module('example', [])
    .directive('testcase', function() {
        return {
            restrict: 'C',
            link: function(scope, element, attrs) {
                element.css('color', 'red');
            }
        }
      }
    );
  </code></pre>
  
  <p>Why isn't the directive being applied to the <code>div</code> that's getting its class through <code>ng-class</code>? Am I misunderstanding something about the order in which AngularJS is processing directives?</p>
  
  <p>How should I be conditionally applying a directive to an element based on the evaluation of an expression?</p>