A pesquisa filtrada retorna duplicatas após a primeira pesquisa - html5, angularjs, angularjs-scope, angularjs-ng-repeat, angularjs-service

No meu aplicativo web angularJS, eu tenho este trecho de código onde mostro alguns nomes (formando parte do array SearchRcps) filtrados por um searchString inserido em uma barra de pesquisa de entrada. $index%4==0 distribuir os resultados em várias linhas de 4colunas cada. Quando faço a primeira pesquisa, o resultado está correto, mas quando volto a esvaziar o searchstring ou quando faço uma segunda pesquisa, aparecem duplicatas.

<div class="col-xs-12">
<div class="row" ng-repeat="rcpGroup in SearchRcps | filter:searchString track by $index" ng-if="$index%4==0">
<div class="col-sm-6 col-md-3" ng-repeat="rcp in (SearchRcps | filter:searchString).slice($parent.$index,$parent.$index+4)">
<p>{{rcp.name}}</p>
</div>
</div>
</div>

Qualquer um

Respostas:

Tente se mover ng-if="$index%4==0" cláusula da div da linha para uma div separada:

<div class="col-xs-12">
<div class="row" ng-repeat="rcpGroup in SearchRcps | filter:searchString track by $index">
<div ng-if="$index%4==0">
<div class="col-sm-6 col-md-3" ng-repeat="rcp in (SearchRcps | filter:searchString).slice($parent.$index,$parent.$index+4)">
<p>{{rcp.name}}</p>
</div>
</div>
</div>
</div>