title: getBoundingClientRect return zero for angular directive at run time
body: <p>I wrote an angular directive to track each paragraph in a huge content. When the content is static in the page it works fine. When the content is served by API, getBoundingClientRect always return zero for my placeholders. I do recompile before giving it to view. How to calculate getBoundingClientRect for a directive inside dynamic content ?</p>
  
  <p>My Content:</p>
  
  <pre><code>&lt;p storytracker="261"&gt;"He don't look to have taken much harm." said Mrs. White politely.&lt;/p&gt;
  </code></pre>
  
  <p>In my Diective:</p>
  
  <pre><code>  angular.module('web')
      .directive('storyTracker', storyTracker);
  
    function storyTracker($compile) {
      var directive = {
        restrict: 'EA',
        transclude: true,
        scope: {
          sid: '='
        },
        link: function(scope, elem, attrs) {
          //Check if element is in viewport on page load
          if (isElementInViewport(elem[0])) {
             //Element is in view port
          }
  
          //Check if element is in viewport on page scroll
          var page = angular.element(window);
          page.bind('scroll', function() {
            if (isElementInViewport(elem[0])) {
              //Element is in view port
            }
          });
        }
      };
      return directive;
    }
  
        function ifElementinviewport(el) {
          var rect = el.getBoundingClientRect();
          return (
            rect.top &gt;= 0 &amp;&amp;
            rect.left &gt;= 0 &amp;&amp;
            rect.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
            rect.right &lt;= (window.innerWidth || document.documentElement.clientWidth)
          );
        }
  </code></pre>