title: AngualarJS Directives - Waiting for a directive template to finish rendering?
body: <p>I'm trying to write a directive that has a template. The template is rendering some DOM elements I want to retrieve. However, when I try to retrieve my DOM elements in the linking function, the DOM elements are not found. If I add a window.setTimeout method before selecting the elements they are found. How can I wait for a template to finish rendering before trying to manipulate the DOM in the linking function?</p>
  
  <p>Here is the directive code for what I'm trying to do:</p>
  
  <pre><code>module.directive('testLocationPicker', function() {
  
      var linkFn = function(scope, element, attrs) {
          console.log('in linking function');
          window.setTimeout(function() {
              var positions = $('.position');
              console.log('number positions found: ' + positions.length);
              positions.click(function(e) {
                  console.log('position clicked');
                  scope.$apply(function() {
                       scope.selectedPosition = $(e.currentTarget).html();
                  });
              });
          }, 500);
      };
  
      return {
          link: linkFn,
          restrict: 'E',        
          template: 'Choose a position: &lt;div class="position" ng-repeat="position in positions"&gt;{{position}}&lt;/div&gt;',        
      }        
  
  });
  </code></pre>
  
  <p>I have a JS Fiddle of what I'm trying to do: <a href="http://jsfiddle.net/bdicasa/XSFpu/42/" rel="nofollow">http://jsfiddle.net/bdicasa/XSFpu/42/</a></p>