$ scope。$ watch只使用UI Bootstrap的分页指令工作一次

Question

我尝试对我的Angular项目进行分页，然后我决定按照这个例子。

http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview

一切正常，但$ scope.watch只在第一次加载数据时才工作一次。 但在那之后，当我点击分页链接时，似乎$ scope.watch没有做任何事情。

这是我的js代码

$.ajax({
    url: 'json/multipleOrder.json',  //Server script to process data
    type: 'get',
    beforeSend: function(xhr){

    },
    success: function(data){
      $scope.orderDetails = data;
      $scope.lastPage = data.last_page;

      $scope.orders = data.data
      $scope.getTotal = function(order){
          var total = 0;
          for(var i = 0; i < order.products.length; i++){
              var subtotal = order.products[i].subtotal;
              total += subtotal;
          }
          return total;
      }

      $scope.returnRowNumber = function(rowNumber){
          if(rowNumber === 0){
            return true;
          } else {
            return false;
          }
      }

      $scope.filteredTodos = [];
      $scope.currentPage = data.current_page;
      $scope.numPerPage = data.per_page;
      $scope.maxSize = 5;
      $scope.totalOrders = data.total;

      $scope.$watch('currentPage + numPerPage', function() {
        var begin = (($scope.currentPage - 1) * $scope.numPerPage)
        , end = begin + $scope.numPerPage;

        $scope.filteredOrders = $scope.orders.slice(begin, end);
        console.log('end scope watch');
        //Only printed once when the data was loaded
      });

      $scope.$apply();

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest);
        alert(textStatus);
    }
});

这是我的指示和表格。

<div class="pagination-box">
        <nav class="clearfix">
          <pagination 
            ng-model="currentPage"
            total-items="totalOrders"
            max-size="maxSize"
            boundary-links="false">
          </pagination>
        </nav>
      </div>

    <tr ng-repeat="order in filteredOrders">
            <th class="text-center">
              <span class="table-order-number">
                <strong>{{ order.id }}</strong>
              </span>
              <br>
              <span>{{ order.customer.name }}</span>
              <br>
              <br>
              <span>{{ order.estimated_pickup }}</span>
            </th>
            <td>
              <span ng-repeat="product in order.products">
                1 X {{ product.name }} <br>
                <span ng-repeat="extra in product.extras">
                  <span ng-repeat="item in extra.items">
                    -- ext {{ item }}
                    <br>
                  </span>
                </span>

                <br>
              </span>
            </td>
            <td>{{ getTotal(order) }}</td>
            <td>
              {{ order.customer.address.address1 }}
              <br>
              {{ order.customer.address.address2 }}
              <br>
              {{ order.customer.address.suburb }}
              <br>
              {{ order.customer.address.city }}
              <br>
              <br>
              <strong>
                <i class="icon ion-iphone" style="font-size: 24px;"></i> {{ order.customer.phone }}
              </strong>
            </td>
            <td>aaaa</td>
            <td class="text-center">
              <button class="button button-balanced order-bt" ng-click="togglePickupModal()">
                button-balanced
              </button>
            </td>
          </tr>

但是console.log（'结束范围观察'）只打印一次。 当我点击敲打链接时什么都没发生。 我该如何解决这个问题？

谢谢！