title: AngularJS: Linking to elements in a directive that uses ng-repeat
body: <p>I have a simple directive where the template uses ng-repeat inside it.  I need to run some code to instantiate a jquery component against some of the elements created by the ng-repeat directive.  The problem is that if I put this code in the link function.  The ng-repeat hasn't built those elements yet so nothing is instantiated.</p>
  
  <pre><code>App.directive('myDirective', ['$compile', '$timeout', function($compile, $timeout) {
    return {
      scope: {
          domains: '='
      },
      templateUrl: '/app/partials/my_directive.html',
      link: function($scope, element, attributes) {
          element.find('.standard-help').tooltip('destroy');
          element.find('.standard-help').tooltip({placement: 'top', trigger: 'click hover focus'});
      }
    };
  }
  </code></pre>
  
  <p>The template would look like the following.  I'm trying to attach </p>
  
  <pre><code>&lt;ul class="media-list domainList"&gt;
    &lt;li class="media" style="position:relative;" ng-repeat="domain in domains"&gt;
      &lt;a class="domainHeader" href="javascript://"&gt;
          &lt;span class="domainHeader"&gt;{{domain.tag}}&lt;/span&gt;
      &lt;/a&gt;
      &lt;div class="media-body" style="margin-left: 52px;"&gt;
          &lt;ul class="standardsList"&gt;
              &lt;li ng-class="{ standardDisplayed: lessonLayout == 'standards' }" ng-hide="standard.lessons.length == 0" ng-repeat="standard in domain.standards"&gt;
                  &lt;a href="javascript://" title="{{standard.description}}" ng-show="lessonLayout == 'standards'" class="standard-help pull-right"&gt;&lt;i class="icon-question-sign"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;h6 ng-show="lessonLayout == 'standards'"&gt;{{standard.tag}}&lt;/h6&gt;
                  &lt;ul class="lessonsList"&gt;
                      &lt;li ng-class="{ lesson: true }" ng-repeat="lesson in standard.lessons" ng-click="onLessonSelected(lesson)"&gt;
                          &lt;i class="icon-lock lesson-locked"&gt;&lt;/i&gt;
                          &lt;div&gt;{{lesson.title}}&lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've tried using $watch() and $observe() to register a callback when the domains change and instantiate the tooltip code then.  However, I can't seem to get it to call me at the right time.  Any ideas what I'm missing?</p>