Javascript динамическая загрузка контента без использования ajax

Question

У меня есть список массива новостных статей для отображения на переднем крае. Но я только хочу отобразить первые 5 при загрузке. Когда пользователь прокручивает почти до конца div (вместо нижнего конца, поскольку у меня есть нижний колонтитул по умолчанию), он заполняет еще 5 и так далее, и так далее. Я использую angularjs limitTo для управления количеством новых статей для отображения.

С кодами, которые у меня есть, при прокрутке до конца div он будет загружать много новых статей (более 5) при прокрутке, и это не очень хорошо работает в мобильном представлении. Любой может научить меня, как заставить контент загружаться, когда я прокручиваю, как страница на YouTube, за исключением того, что не прокручиваю весь путь до конца со списком данных в массиве.

<div ng-repeat="news in ctrl.newsList | limitTo:ctrl.displayLimit">

var ctrl.displayLimit = 5;
$(window).scroll(function() {
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300) {
    if (ctrl.newsList.length > ctrl.displayLimit) {
      ctrl.displayLimit = ctrl.displayLimit + 5;
    }
  }
});