AngularJS - refresh ng-repeat

Question

I'm using ng-repeat to display a collection of values. My filter options changes according to an ajax call to server. How can I refresh the ng-repeat after the filter parameters have been received?

js fiddle

Template

<div> <div data-ng-controller="myCtrl">     <ul>         <li data-ng-repeat="item in values | filter:filterIds()">              <code>#{{item.id}}</code> Item         </li>     </ul>    </div>  </div>  <button ng-click="loadNewFilter()"> filter now</button> 

Angular

var app = angular.module('m', []);  app.controller('myCtrl', function ($scope) {   $scope.values = [    {id: 1},    {id: 2},    {id: 3},    {id: 4},    {id: 5},    {id: 6}   ];    $scope.filter = [1,2,3,4,5,6];    $scope.filterIds = function (ids) {         return function (item) {             var filter = $scope.filter;             return filter.indexOf(item.id) !== -1;                   }   }    $scope.loadNewFilter = function (){     $scope.filter = [1,2,3];          } }); 

Answer 1

You need to tell angular that the values have changes:

$scope.loadNewFilter = function (){     $scope.filter = [1,2,3];           $scope.$apply(); } 

Answer 2

In my case I had a trackBy in my ng-repeat and had to remove it to get it to update.