title: Bind ng-class to a local scope expression in custom AngularJS directive
body: <p>I would like my custom directive to be able to pre-process its own classes based on some values bound to its parent scope. However, I can't seem to get the directive to set its own ng-class and execute a function on the local scope.</p>
  
  <pre><code>directive('testDirective',function(){
       restrict: 'E',
       scope: {
           inputValue: '='
       },
       template: '&lt;div&gt;dynamically styled content&lt;/div&gt;',
       bindToController: true,
       controllerAs: 'ctrl',
  
       compile: function(element){
            element.attr('ng-class', 'ctrl.getClass()');
       },
  
       controller: function(){
           this.getClass = function(){
               //return array of classes based on value of this.inputValue
           }
       }
  });
  </code></pre>
  
  <p>Unfortunately no styles get applied as the expression is never evaluated and is just being assigned as a string. I see the following when I inspect the DOM element</p>
  
  <pre><code>ng-class="ctrl.getClass()"
  </code></pre>
  
  <p>I realize that I could just use jQuery to add my classes in the link function, but then they would not be bound to my data. I was also hoping to avoid using $watch if at all possible.</p>
  
  <p>Any ideas are welcome!</p>