Javascript AngularJS-分页未在$scope.Watch更改上呈现（包括代码笔）

问题背景：

我在学AngularJS。我已经创建了一个简单的应用程序，它接受3个表单输入，在提交此表单时，应该呈现一个分页列表。我依赖于UI引导。这是一个Plnkr，显示了我正在尝试将分页示例合并到我的应用程序中：

问题和演示：

这是到目前为止我在CodePen上的代码的链接：

我的

searkingservice

模型中有一个1000个项目的列表，在两个控制器之间注入和共享

当

searchingService

模型上的

searchingService.searchList

列表发生更改时，我无法让分页的

ng repeat

进行填充， 这就好像没有触发

$scope.Watch

---

如果您有任何帮助，我们将不胜感激。

将第31行从

$watch

更改为

$watchCollection

。由于您的服务正在变异数组（通过

.push

），因此引用保持不变，因此不会触发

$watch

$watchCollection

将监视对数组成员的引用，而不是对数组本身的引用。

正如bchemy指出的，

$watch

应更改为

$watchCollection

。但这一更改不足以让你的应用程序与你当前的代码正常工作，因为分页看起来已被破坏

您还应添加另一个监视程序来控制分页，如示例中要复制的监视程序：

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

    $scope.filteredItems = $scope.searchingService.searchList.slice(begin, end);
  });

另外，

$scope.items

数组中有重复的

搜索列表

，这会弄乱分页长度

我创建了这个，您可以看到您的示例完全有效