Как заставить ngInfiniteScroll работать с панелью Bootstrap?

Question

Я пытаюсь использовать ngInfiniteScroll, чтобы загрузить больше моего списка элементов, но он работает только при загрузке шаблона, но не работает при прокрутке полосы прокрутки. Я пытаюсь добавить некоторые другие атрибуты, такие как infinite-scroll-container, infinite-scroll-parent, но это ничего не меняет. * HTML код:

<div id="scroll-section" class="containered">
   <div class="products-list" infinite-scroll="getData()" infinite-scroll-container="'#scroll-section'" infinite-scroll-distance="2">
      <div class="media" ng-repeat="item in provinces track by $index">
          <div class="media-body">
              <h4 class="media-heading product_name">{{item.name}}</h4>
              <p>Mã: {{item.provinceid}}</p>
          </div>
      </div>
   </div>
</div>

* Код CSS:

.containered{
  height: 300px;
  overflow-y: auto;
}

* Код JS:

var app = angular.module('scrollTest', ['infinite-scroll']);
app.controller('mainController', function ($scope, $http) {
    $scope.provinces = [];
    $scope.filterElements = {page: 1};

    $scope.getData = function () {
    $http.post(url, $.param($scope.filterElements), {headers: {'Content-Type':'application/x-www-form-urlencoded'}}).then(function (response) {
            var res = response.data;
            if (res.status === 200) {
                $scope.filterElements.page += 1;
                angular.forEach(res.data, function (item) {
                    $scope.provinces.push(item);
                })
            }
        });
    };
});