Я хотел бы сделать нумерацию страниц, как в этой ссылке -repeat">Как использовать UI Bootstrap Pagination для таблицы, сгенерированной с помощью ng-repeat

Я прочитал документы здесь https://angular-ui.github.io/bootstrap/#!#getting_started ng-model="pageNumber", но я не знаю, что подразумевается под "к этому параметру применен прослушиватель angular $watch", например, ng-model имеет $ смотреть слушателя.

Я использую компоненты. Что означает прослушиватель $watch и как использовать $watch внутри компонента. Это вообще возможно или есть другой способ? ознакомьтесь со всем кодом в моем плункере. https://plnkr.co/edit/E2dKJx2PB1BXsE9hFkte?p=preview

список-бронирования.html

<ul 
uib-pagination
ng-model="$ctrl.currentPage" 
items-per-page="$ctrl.itemsPerPage" 
total-items="$ctrl.bookings.length" 
max-size="$ctrl.maxSize">
</ul>
<table>
     ...
    <tr ng-repeat="booking in $ctrl.bookings">
      ...
    </tr>
  </tbody>
</table>

что я должен сделать, чтобы это сработало?

  app.component('bookingList', {
    templateUrl: 'booking-list.html',
    controller: ['BookingSvc', function(BookingSvc) {
      let self = this;

      self.bookings = BookingSvc.query();

      self.maxSize = 2;
      self.currentPage = 1;
      self.itemsPerPage = 2;

      // what should I do to make this work?
      /*$scope.$watch("currentPage", function() {
        setPagingData(self.currentPage);
      });

      function setPagingData(page) {
        let pagedData = self.bookings.slice(
          (page - 1) * self.itemsPerPage,
          page * self.itemsPerPage
        );
        self.pagedBookings = pagedData;
      }*/

    }]
  });