title: AngularJS, adding a scrolling directive to pick up bottom of scroll is not working
body: <p>This is a basic directive to detect scrolling to the bottom of an iframe but it is not kicking off, do you see an issue?</p>
  
  <pre><code>(function() {
    angular.module('myapp').directive('textAgreement', function($timeout) {
      return {
        restrict: 'A',    
        scope: true,
        compile: function(tElement) {
          tElement.append('&lt;div ng-show="bottom"&gt;There is more...&lt;/div&gt;');
          return function(scope, element) {
            var elm = element[0];        
            var check = function() {
              scope.bottom = (elm.offsetHeight + elm.scrollTop &gt;= elm.scrollHeight);
            };
            var appliedCheck = function() {
              scope.$apply(check);
            };
            element.bind('scroll', appliedCheck);
            check();        
            $timeout(check,500);          
            }; 
        }    
      };
    });   
  })();
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12 body-text"&gt;
          &lt;h4&gt;Use Agreement&lt;/h4&gt;
          &lt;div class="col-xs-12" id="tos" class="load-iframe"&gt;
              &lt;iframe text-agreement id="agreeFrame" class="agree-frame" src="{{ ::trustSrcAgreementUri }}"  style="border:0" width="100%" height="100%"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>