title: How to detect an "on scroll" event using angularJs & Ionic Framework
body: <p>I come from a JQuery background and don't know if this is possible or not in AngularJS.</p>
  
  <p>I am working on a project using Ionic framework &amp; AngularJS</p>
  
  <p>I am trying to capture the "on scrolling" event using angular. </p>
  
  <p>Currently I use the following HTML to create a list of 20 items and the following code outputs the "test" string on the <code>console log</code> on page load. But when I scroll up or down the list the event doesn't seem to fire again.</p>
  
  <p>I've been researching but I can't seem to come across a way to get the "on scroll event" after the page has been loaded.  At least <code>directive</code> doesn't get call when the user is interacting with the list, so I think this is the wrong approach. </p>
  
  <p>How can I capture that event in angular? Is it possible?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ion-content&gt;
        &lt;div class="list" &gt;
          &lt;div class="item" ng-repeat="item in data.items" when-scrolled="loadMore()" &gt;Item {{item}}&lt;/div&gt;
        &lt;/div&gt;
        &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>angular.module('starter.controllers', ["ionic"])
  .controller('AppCtrl', function($scope,$ionicScrollDelegate) {
  
    $scope.myTitle = 'Template';
  
    $scope.data = {
      items : [],
      title : ''
    };
  
    for(var i = 0; i &lt; 20; i++) {
      $scope.data.items.push(i);
    }
  })
  .directive('whenScrolled', function () {
      return function(scope, element, attrs) {
          console.log("test");
      };
  });
  </code></pre>