title: Angularjs - find element with dynamic classes
body: <p>I'm adding classes using ng-class, but when I try to find these elements using directive, I'm not able to find them.</p>
  
  <pre><code>.factory('loadTemplate', function($compile) {
    return function(template) {
      return {
        restrict: 'E',
        replace: true,
        templateUrl: template,
        link: function(scope, el, attrs) {
          console.log(el.find('.step.disabled'));
        }
      }
    }
  })
  
  .directive('step1', function(loadTemplate) {
    return loadTemplate('processes/steps/step1.html');
  })
  </code></pre>
  
  <p>But it doesn't find the elements (Chrome console output):</p>
  
  <pre><code>context: div
  length: 0
  prevObject: o.fn.init[1]
  selector: ".step.disabled"
  __proto__: Object[0]
  </code></pre>
  
  <p>processes/steps/step1.html:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div toggle-box&gt;
      &lt;div class="step" ng-class="{enabled: condition, disabled: !condition}"&gt;
  ...
  </code></pre>
  
  <p>And I'm sure that there are .disabled divs.</p>
  
  <p>When I try finding the elements using only $('.step'), I can find them, because the class is already there.</p>
  
  <p>How can I solve this?</p>
  
  <p>Here is a Plunker: <a href="http://plnkr.co/edit/AFYMqLx0wP3tRFFWrADd?p=preview" rel="nofollow">http://plnkr.co/edit/AFYMqLx0wP3tRFFWrADd?p=preview</a></p>