Ng-repeat在向项目附加项目后从初始化渲染整个列表

Question

我正在使用Angular实现无限滚动。当用户到达滚动结束时，使用Ajax调用获取新数据，并将其附加到现有列表。以下是相关代码：

成功完成AJAX调用后调用的函数：

function successCallBack(data){
     var scope = angular.element($("#splistroot")).scope();
     scope.$apply(function(){
      if(scope.providersList === null) {
           scope.providersList = []; /* init if null */
        }

        Array.prototype.push.apply(scope.providersList, JSON.parse(data.serviceproviderlist));
        scope.serviceName = data.category;
        scope.limit += SEARCH_LIMIT;
        viewToBeDisplayed(LIST_VIEW);
     })
     setEvents();
     if (A.onScreen(listEndDiv,10)) {
          getMoreDataEnd();
     }
  }

HTML部分：

<div id="spn-service-provider-list">
    <div ng-repeat="providersList in ( filteredproducts = ( providersList | filter:{ providerName: spsearch } | filter:{ citiesServicing: locationsearch }:ignoreNullComparator ))  | orderBy: 'rank' | limitTo: limit" >
    ......
    .......

我面临的问题是每次调用 successCallBack（）时，ng-repeat都会从开始渲染整个列表。我想显示附加的数据，就像大多数网站一样。这有什么解决方案吗？

谢谢！