title: AngularJS - How to query the DOM when directive rendering is complete
body: <p>I'm trying to implement a custom scroll pane component using an AngularJS directive. in the following <a href="http://jsfiddle.net/neuTA/134/" rel="nofollow noreferrer">jsfiddle example</a> I have an example of the basic prototype.</p>
  
  <p>here is a schema of my idea:
  <img src="https://i.stack.imgur.com/xlmku.jpg" alt="enter image description here"></p>
  
  <p>Here is the directive code:</p>
  
  <pre><code>    myApp.directive('lpScrollPane', function factory() {
      return {
          restrict: 'A',
          replace: true,
          transclude: true,
          template: '&lt;div class="scrollPaneWrapper"&gt;&lt;div class="scrollPane" ng-transclude&gt;&lt;/div&gt;&lt;div class="thumbTrack" &gt;&lt;/div&gt;&lt;/div&gt;',
          compile: function (tElement, tAttrs) {
              var minHeight = 30;
              return function (scope, iElement, iAttrs) {
                  var thumbTrack = angular.element(iElement.children()[1]);
  
                  scope.onScrollHeight = function () {
                      console.log(iElement.children()[0].scrollHeight);
  
                      var H1 = iElement[0].offsetHeight;
                      var H2 = iElement.children()[0].scrollHeight;
                      if (H2 &gt; H1) {
                          var trackHeight = Math.round(minHeight + (H1 - minHeight) * (1 - Math.pow((H2 - H1) / H2, 0.8)));
                          thumbTrack.css({
                              display: "block",
                              height: trackHeight + "px"
                          });
                          console.log(H2, H1, trackHeight);
                      } else {
                          thumbTrack.css({
                              display: "none"
                          });
                      }
                  };
  
                  scope.$watch(function () {
                      scope.onScrollHeight();
                      //setTimeout(scope.onScrollHeight, 100)
                  });
  
  
              }
          }
      };
  });
  </code></pre>
  
  <p>Basically there are 2 dives 1 with overflow hidden and one with overflow scroll and another div to mimic the thumb tracker.</p>
  
  <p>My Goal is to monitor the scrollHeight property and then change the tracker height accordingly. the issue is the $watch gets fired before the DOM is rendered so there is a delay in showing and calculating the tracker. For now I used setTimeout on the watch function and it works fine (un-comment line 35 and comment 34 to see it in action).</p>
  
  <p>What would be the right way to do it? </p>