AngularJS ng-repeat not refreshing on array update

Question

I have a problem where the ng-repeat aren't updating the list when the array change.

I'm using a JavaScript promise to compute a calculation to then return an object containing 2 arrays. These arrays is then to be shown on the view on the below code snippet.

<button class="btn" data-toggle="modal" data-target="#tableModal" ng-click="vm.compareTables(vm.table)">Some text</button>
<!-- Modal -->
<div class="modal fade" id="tableModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">{{ vm.table.title}}</h4>
            </div>
            <div class="modal-body">
                <h4>You got</h4>
                <p ng-repeat="g in vm.got">{{ g }}</p>
                <h4>You dont:</h4>
                <p ng-repeat="d in vm.dont">{{ d }}</p>
            </div>
        </div>
    </div>
</div>

In the controller am I wrapping a function in a promise and it returns the right answer with 2 filled arrays. I can also print the result in the controller, the ng-repeat are just not updating the view.

var vm = this;

vm.compareTables = function (table) {
    getData().then(function succesCallback(response) {
        vm.ing = response.data;
        var r = table;
        var promise = pro(r, vm.ing);
        promise.then(function (data) {
            console.log(data.got);
            console.log(data);
            vm.got = data.got;
            vm.dont = data.dont;
        });
    });
}

The above promise returns the right result.

I'm using angular 1.6.1 if that helps. The controller and view is connected to a component, which is working fine.

UPDATE

Here is the console output for the promise return

@AvneshShakya Yes, I have added an image of the console output. Can't show you the data but there is an array size. — McBoman, Jan 08 '17 at 13:26
It is a function for comparing 2 tables. It working fine. I have found problem might be within the binding between the two components. — McBoman, Jan 08 '17 at 15:08
Why are you assigning "this" to your vm variable and how come it's not declared as $scope.vm = this ? — Ghassen Louhaichi, Jan 08 '17 at 15:28
I guess your modal not getting `vm` for `"g in vm.got"` written in modal scope. Try to check for $parent scope. As per documentation--> ` scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a a provided scope). Defaults to $rootScope ` — Dhananjay C, Jan 08 '17 at 17:42

score 2 · Answer 1 · edited Jan 08 '17 at 16:13

2

Wrap your vm.got = .. in a $scope.$apply(function () { ... }) to force a digest cycle. Angular is probably not aware of your promise callback because you probably use a different promise/callback mechanism than angular native ones ($http, $q, $resource).

edited Jan 08 '17 at 16:13

Avnesh Shakya

3,502
2
19
28

answered Jan 08 '17 at 15:17

Noppey

1,224
9
17

When wrapping it in a $apply am I getting that an digest cycle already is in progress. – McBoman Jan 08 '17 at 17:11
Are you sure its the same controller in your js and your html? – Noppey Jan 08 '17 at 17:39
use native promise/callback mechanism ($http, $q, $resource) did the trick for me. Thanks. – GoldenAxe Apr 06 '17 at 18:43

score 0 · Answer 2 · answered Jan 08 '17 at 15:19

0

use

$timeout(function () {
    vm.got = data.got;
    vm.dont = data.dont;
})

answered Jan 08 '17 at 15:19

Andrey Jakovenko

268
1
3
12

score 0 · Answer 3 · answered Jan 08 '17 at 16:54

0

I hope this helps you . Refer this link and if not clear watch the video given at the end of this link . solve problem of ng-repeat

answered Jan 08 '17 at 16:54

Vivek Verma

273
2
15

score 0 · Answer 4 · answered Jan 08 '17 at 17:02

0

when your out of angular context you need to use $scope.$apply() method in promise callback to update your view.

answered Jan 08 '17 at 17:02

r0ck

172
11

AngularJS ng-repeat not refreshing on array update

4 Answers4