title: angular: binding to scroll event not working
body: <p>I am trying to follow this jsfiddle:</p>
  
  <p><a href="http://jsfiddle.net/vojtajina/U7Bz9/" rel="nofollow">http://jsfiddle.net/vojtajina/U7Bz9/</a></p>
  
  <p>Now I have this in my script file:</p>
  
  <pre><code>var app = angular.module('my-app', [
         'scroll',
         'ui.bootstrap',
         'ngRoute']);
  
  var scrollService = angular.module('scroll', []).directive('whenScrolled', function() {
      return function(scope, elm, attr) {
          var raw = elm[0];
          console.log("binding");
  
          elm.bind('scroll', function() {
            console.log("scrolling");
              if (raw.scrollTop + raw.offsetHeight &gt;= raw.scrollHeight) {
                  scope.$apply(attr.whenScrolled);
              }
          });
      };
  });
  </code></pre>
  
  <p>The HTML file (in <code>jade</code> notation) has:
  EDIT: I added an id and the CSS</p>
  
  <pre><code>div#lista_iniciativas.row(when-scrolled="loadMore()")
  </code></pre>
  
  <p>Then the </p>
  
  <pre><code>#lista_iniciativas {
    overflow: auto;
  }
  </code></pre>
  
  <p>`</p>
  
  <p>Thing is I can see the "binding" log in the console, but never the "scrolling", even debugging I never get to enter the bind function...In other words the binding function never fires. Any idea what's wrong here? Am I binding somewhat the wrong way?</p>