AngularJS array.push ng:repeat not updating

Question

I have a create function in a service which is responsible for taking input data, turning it into a resource, doing a save and inserting it into a local cache.

create = (data, success, error) ->
    throw new Error("Unable to create new user, no company id exists") unless $resource_companies.id()

    # create the resource
    new_model = new resource(data)

    # manually add the company id into the payload (TODO: company id should be inferred from the URL)
    new_model.company_id = $resource_companies.id()

    # do the save and callbacks
    new_model.$save( () ->
        list.push(new_model)
        success.call(@) if success?
    , error)

My problem is that an ng:repeat that watches the list variable is not getting updated. As far as I can tell this is not occurring outside on AngularJS so it does not require a $scope.$apply() to keep it up to date (indeed, if I try to trigger a digest, I get a digest already in progress error)

What's doubly weird, is I have this exact same pattern used elsewhere without issue.

The code used by my controller to access the list array is (this is in the service)

# refreshes the users in the system
refresh = (cb) -> list = resource.query( () -> cb.call(@) if cb? )

In the controller:

$scope.users = $resource_users.refresh()

I added some debugging around this. I can see that a digest is getting called after the array.push occurs, but in the $scope.users which should be pointing to a reference of the array, still reports the old items in the array. It's like somehow the array reference is not being passed correctly. — Samuel
– Samuel, Commented Jun 12, 2013 at 0:58
$scope.users is pointing to a reference in the array? How so? — Sharondio
– Sharondio, Commented Jun 12, 2013 at 1:14
$scope.users is point to the array variable "list" in the service through the refresh function. list is scoped in the service so that both the refresh and the create methods can reach it. — Samuel
– Samuel, Commented Jun 12, 2013 at 1:21
I've created a gist here wich a stripped back version of the controller / service: gist.github.com/Rodeoclash/5762240 — Samuel
– Samuel, Commented Jun 12, 2013 at 1:24
If the $watch is watching the actual "list" variable, that won't trigger anything. If it's watching $scope.users, that will trigger anytime the $scope.users is updated. I'd have to see the rest of the controller to get a sense of what's going on. — Sharondio
– Sharondio, Commented Jun 12, 2013 at 1:31

SimplGy · Accepted Answer · 2014-04-02 18:55:39Z

0

This may be because you are assigning a new reference. Angular is watching the old reference, and it never changes. Here is the where the reference is replaced:

list = resource.query( /* ... */ )

If, instead, you make the list a property of an object, angular's ng-repeat watch should be able to observe the change in the list property of the data object:

data.list = resource.query( /* ... */ )

answered Apr 2, 2014 at 18:55

SimplGy

20.5k15 gold badges112 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS array.push ng:repeat not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related