Angularjs - Trova elemento con lezioni dinamiche

Question

Aggiungo le classi usando la classe NG, ma quando cerco di trovare questi elementi usando la direttiva, non sono in grado di trovarli.

.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');
})

.

Ma non trova gli elementi (output console Chrome):

context: div
length: 0
prevObject: o.fn.init[1]
selector: ".step.disabled"
__proto__: Object[0]

.

Processi / passaggi / STEP1.HTML:

<div>
  <div toggle-box>
    <div class="step" ng-class="{enabled: condition, disabled: !condition}">
...

.

E sono sicuro che ci sono dei divsidati.

Quando provo a trovare gli elementi usando solo $ ('. Step'), posso trovarli, perché la classe è già lì.

Come posso risolverlo?

Ecco un plunker: http://plnkr.co/edit/afymqlx0wp3trffwadd?p=preview

Answer 1

Quello di cui avevo bisogno era aspettare che l'angolare finisca di rappresentare la vista, avvolgendo con una funzione di timeout di $ anche con un timeout 0 funzionerà.In questo modo:

Plunker Esempio: http://plnkr.co/edit/rcqyc4aipnlq1wtpahjp?p=previeweleth

.factory('loadTemplate', function($timeout) {
  return function(template) {
    return {
      restrict: 'E',
      replace: true,
      templateUrl: template,
      link: function(scope, el, attrs) {
        $timeout(function() {
          $('.step.disabled').attr('border-color', '#f00');
        }, 0);
      }
    }
  }
})

.directive('step1', function(loadTemplate) {
  return loadTemplate('processes/steps/step1.html');
})

.