ng-repeat tag doesn't refresh data from model

Question

I'd like to know why my ng-repeat is not refreshing data from array i'm trying to display. Here is html code snippet:

<div ng-controller="photoCtrl as c">
        <div ng-repeat="p in c.photos">
            <div>USER: {{p.user_id}</div><br/>
            <div>PHOTO NAME: {{p.name}}</div><br/>
            <div>PRICE: {{p.price}}</div><br/>
            <hr>
        </div>

        <button ng-click="prev()">Prev</button><input type="number" ng-model="page_nr"><button ng-click="next()">Next</button>
    </div>

And here is my angular controller code:

    app.controller('photoCtrl', ['$scope', '$window', 'PhotoFactory', function($scope, $window, PhotoFactory){
    $scope.photos = [];
    $scope.page_nr = 0;
    $scope.searchNextFive = function(){
        let toSend = angular.copy($scope.page_nr);
        PhotoFactory.searchNextFive(toSend).then(function(response){
            $scope.photos = angular.copy(response.data);
            console.log($scope.photos);
        });
    };

    $scope.getAll = function(){
        let toSend = angular.copy($scope.user);
        PhotoFactory.getAll(toSend).then(function(response){
            $scope.photos = angular.copy(response.data);
            console.log($scope.photos);
        });
    };
    $scope.prev = function(){
        $scope.page_nr--;
        $scope.searchNextFive();
    };

    $scope.next = function(){
        $scope.page_nr++;
        $scope.searchNextFive();
    };
}]);

Code is not giving any errors. Array 'photos' is refreshing properly when change is done, i saw it by printing 'photos' on console.log(). I'd like to know why data is not rendering. Is ng-repeat not working on div tags or am i doing something wrong?

Could you post the `console.log` outputs when you page forward/backwards? — FDavidov, Jun 17 '18 at 10:38

score 2 · Accepted Answer · edited Jun 18 '18 at 12:26

2

You're mixing two approaches, you're predicting one approach would work like the other. Over here, you have used controllerAs pattern where you have defined controller alias c like ng-controller="photoCtrl as c". That means you will expose binding by attaching variables and function to this(context). But you did attach the variables and functions to $scope, which means you don't need to use controller alias. You can quickly solve this issue by removing c. from the variable names in HTML.

Though I'd recommend you to use controllerAs approach. Only thing you have to change is, remove all bindings from scope, and create a variable at the start of your controller called as var vm = this; and then replace all $scope. with vm..

and change below lines

<button ng-click="prev()">Prev</button>
<input type="number" ng-model="page_nr"/>
<button ng-click="next()">Next</button>

to

<button ng-click="c.prev()">Prev</button>
<input type="number" ng-model="c.page_nr"/>
<button ng-click="c.next()">Next</button>

edited Jun 18 '18 at 12:26

Kailas

7,350
3
47
63

answered Jun 17 '18 at 10:55

Pankaj Parkar

134,766
23
234
299

1

**Thank** ** you** so much! – nvkvc Jun 17 '18 at 11:39
I followed your approach with aliasing and display is working now. I'll be excited to try another approach with scopes. I'm also interested to learn more about difference between this two approaches. If you have some resources about that topic, please share with me and others who are struggling with same problem. Thanks once more! – nvkvc Jun 17 '18 at 11:51
check out [this question](https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers) – Pankaj Parkar Jun 17 '18 at 11:53

score 1 · Answer 2 · answered Jun 18 '18 at 12:33

If you were to use scope alone approach then something like this would work fine:

HTML Code as:

<div ng-controller="photoCtrl"> <!--note the change here instead of "photoCtrl as c" we are using "photoCtrl" -->
    <div ng-repeat="p in photos">
        <div>USER: {{p.user_id}</div><br/>
        <div>PHOTO NAME: {{p.name}}</div><br/>
        <div>PRICE: {{p.price}}</div><br/>
        <hr>
    </div>

    <button ng-click="prev()">Prev</button><input type="number" ng-model="page_nr"><button ng-click="next()">Next</button>
</div>

The controller code you need not modify.

ng-repeat tag doesn't refresh data from model

2 Answers2