Angularjs - encontrar elemento con clases dinámicas

Question

Estoy agregando clases usando ng-clase, pero cuando intento encontrar estos elementos usando la directiva, no puedo encontrarlos.

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

Pero no encuentra los elementos (salida de la consola de cromo):

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

Procesos / Pasos / STEP1.HTML:

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

Y estoy seguro de que hay. DIVSABILIDADES.

Cuando intento encontrar los elementos usando solo $ ('. Paso'), puedo encontrarlos, porque la clase ya está allí.

¿Cómo puedo resolver esto?

Aquí hay un plunker: http://plnkr.co/edit/afymqlx0wp3trffwradd?p=preview

Answer 1

Lo que necesitaba era esperar a que los angulares terminaran la vista, envolviendo con una función de tiempo de espera de $ incluso con un tiempo de espera 0 funcionará.Me gusta esto:

PLUNKER Ejemplo: http://plnkr.co/edit/rcqyc4aipnlq1wtpahjp?p=preview

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