Scroll event is not firing

Question

I have to display more images as the user scrolls down the browser window.I have created a directive for that.But scroll event is not getting fired.

app.directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
        scope.$apply(attr.whenScrolled);
      }
    });
  };
});

In LoadMoreItems, I am pushing two new items into the list:

function LoadMoreItems() {
  $scope.temp = $scope.allItems[$scope.lastCount];

  $scope.items.push({
    Name: $scope.temp.Name,
    Price: $scope.temp.Price,
    StockStatus: $scope.temp.StockStatus,
    Picture: $scope.temp.Picture
  });
  $scope.temp = $scope.allItems[$scope.lastCount + 1];
  $scope.items.push({
    Name: $scope.temp.Name,
    Price: $scope.temp.Price,
    StockStatus: $scope.temp.StockStatus,
    Picture: $scope.temp.Picture
  });

  $scope.lastCount += $scope.count;
}

The below function brings all the items specific to the category.

function getAllItemss(cat) {
  itemsFactory.getSpecificItems(cat)
    .success(function(_items) {
      $scope.allItems = _items;

      //$scope.items = [];
      $scope.lastCount = 0;

      LoadMoreItems();
    })
    .error(function(error) {
      $scope.status = 'Unable to load items : ' + error.message;
    });
}

HTML:

<div when-Scrolled="LoadMoreItems()"></div>

Answer 1

From the scroll docs:

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

So, try to set scroll css property on your div, or bind event listener to $window object(e.g. $($window).bind('scroll',listener)) and do your calculation according to it.