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];      

   }

});