title: angularJS: wait for template to be evaluated before directive loads
body: <p><strong>The Situation</strong></p>
  
  <p>Lets say I have a directive, that has to access certain elements via ID, inside the element on which the directive is defined. The problem, that can occur, is that by the time the directive is evaluated, the child-elements are not yet. The result is, that I'm not able to access those elements by their ID.</p>
  
  <p><strong>Example</strong></p>
  
  <p><strong><a href="http://jsfiddle.net/jcPS6/6/" rel="noreferrer">FIDDLE</a></strong></p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
    &lt;div color="elementId"&gt;
        &lt;div ng-repeat="item in items" id="{{ item.id }}"&gt;
            {{ item.name }}
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var myApp = angular.module('myApp',[]);
  
      myApp.directive("color", function () {
          return {
              restrict: "A",   
              link: function (scope, element, attributes) {
  
                  var name = attributes.color,
                      el = element[0];
  
                  scope.$watch(name, function () {
                      var id = scope[name];
                      console.log(id); //id1
                      console.log(element.children().eq(0).attr("id")); //{{ item.id }}
                      element.find("#"+id).css("background-color","red");
                  });
              }        
          };
      });
  
      function MyCtrl($scope) {
          $scope.items = [
              { id:"id1", name:"item1" },
              { id:"id2", name:"item2" }
          ];
  
          $scope.elementId="id1";
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>So my directive should just paint the background-color of the element with the id in <code>$scope.elementId</code>. (Btw. I know I can handle this simple example much easier, it should just illustrate the general issue).
  The problem is, that the ids of the elements inside ng-repeat are not there yet. As pointed out in the comment in the code, the id is still "{{ item.id }}". So angular didn't evaluate this part yet.</p>
  
  <p><strong>Question</strong></p>
  
  <p>My obvious question is now: how can I make my directive to wait for descendent elements to be completely evaluated?</p>
  
  <p><strong>Further Explaination</strong></p>
  
  <p>In my real application I want to have a directive, that enables me to scroll to a certain elements on the page. I also use a pagination directive to split up the elements I want to show. Because of the pagination, only the elements that are really visible, are in the DOM, so the invisible elements are already filtered out in my controller.</p>
  
  <p>I also have a sidebar, where are small links to ALL the elements (not only the visible ones). When someone clicks on an element in the sidebar, two events should occur:</p>
  
  <ol>
  <li>jump to the correct page </li>
  <li>scroll to the corrent element</li>
  </ol>
  
  <p>When I jump to the page, I basically have the situation, I described above. I have a complete new list of elements, that have to be processed by ng-repeat. But directly after that, I try to tell my scroll-directive, that it should scroll the element with the ID "xy", but this ID is not assigned yet.</p>