Фильтр угловой js-пагинации с пользовательским виджетом Bonita

Question

Я работаю над пользовательским виджетом BONITA для реализации поискового фильтра с разбивкой на страницы таблицы данных.

На платформе Bonita многие библиотеки Angular доступны в Интернете и могут использоваться в настраиваемом виджете.

Пример кода прост, как я добавил все ресурсы в конструкторе пользовательского интерфейса.

Часть шаблона:

   <input type="text" class="form-control" placeholder="Filter..." ng-model="filterText">
      <ul>
         <li ng-repeat="item in filterData = (totalItems | filter : {itemName: filterText}) | limitTo:3:3*(page-1)">
         <div>{{item.itemName}}</div>
        </li>
      </ul>

<uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
    ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>

Часть контроллера:

    function searchP($scope) {
    $scope.page = 1;
    $scope.totalItems = [ {itemName: "Tom"},
                    {itemName: "Tim"},
                    {itemName: "Tum"},
                    {itemName: "Tam"},
                    {itemName: "Tem"},
                    {itemName: "Tiem"},
                    {itemName: "Pum"} ];

     $scope.displayItems = $scope.totalItems.slice(0, 3);
         this.pageChanged = function() {
         var startPos = ($scope.page - 1) * 3;
         //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
      console.log($scope.page);
};

}

Фильтр поиска работает хорошооднако часть страницы не отображается.

Что я должен сделать для этого?Заранее спасибо.