Re-rendering entire ng-repeat

4
votes

I'm unable to re-render ng-repeat. The ng-repeat is connected to a scope variable, which I'm trying to change using an ng-click. The value of the variable is changing on ng-click, but the ng-repeat is not re-rendering. I've tried to go through all the suggestions on using $scope.$apply, but I've not been able to implement it. Please help.

See plunker here: http://plnkr.co/edit/iuh6tMrrjkKxCvQABaa5?p=preview

Relevant code below: (a ng-click is able to change the $scope.currentPaginationValue, as evident in Batarang, but it is not resulting in the re-rendering of ng-repeat associated with $scope.numbers)

.controller('numbersController', function($scope, dataService) {
    $scope.currentPaginationValue = 4;
    $scope.numbers = dataService.fetchNumbers($scope.currentPaginationValue);
    $scope.gotoPrevPage = function() {
            $scope.currentPaginationValue = $scope.currentPaginationValue - 1;
    };
})
2
angularjsbindingangularjs-scopeangularjs-ng-repeat

2 Answers

0
votes

You don't allocate the new value in $scope.numbers.

Try this :

.controller('numbersController', function($scope, dataService) {
    $scope.currentPaginationValue = 4;
    $scope.numbers = dataService.fetchNumbers($scope.currentPaginationValue);
    $scope.gotoPrevPage = function() {
        $scope.currentPaginationValue = $scope.currentPaginationValue - 1;
        $scope.numbers = dataService.fetchNumbers($scope.currentPaginationValue); // add this line
    };
})

Live demo

0
votes

You need to watch the currentPaginationValue and update the numbers array. Here is a fork of your plunkr: http://plnkr.co/edit/jrMTiKV34v01GELdwlEz?p=preview

You need something like this in the numbers controller:

$scope.$watch('currentPaginationValue', function(newVal) {
     $scope.numbers = dataService.fetchNumbers($scope.currentPaginationValue);
});