how do I use bootstrap ui pagination with angularjs 1.6 component

Question

I would like to do pagination like in this link How to use UI Bootstrap Pagination for a table, generated using ng-repeat

I have read the docs here https://angular-ui.github.io/bootstrap/#!#getting_started ng-model="pageNumber", but I don't know what is meant by 'This setting has an angular $watch listener applied to it', for example, ng-model has a $watch listener.

I am using components. What is meant by $watch listener and how do I use $watch inside a component. Is it even possible or is there a different way? checkout my plunker for all of the code. https://plnkr.co/edit/E2dKJx2PB1BXsE9hFkte?p=preview

booking-list.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>

what should I do to make this work?

  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;
      }*/

    }]
  });

Answer 1

Use the $doCheck Life-cycle Hook

With version 1.5.8, AngularJS added the $doCheck life-cycle hook to the $compile service.

From the Docs:

The controller can provide the following methods that act as life-cycle hooks:

• $doCheck() - Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when $onChanges is called. For example, this hook could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not be detected by Angular's change detector and thus not trigger $onChanges. This hook is invoked with no arguments; if detecting changes, you must store the previous value(s) for comparison to the current values.

--AngularJS Comprehensive Directive API Reference -- Life-cycle hooks