View is not updating after scope update

Question

Here is a very simple example of what I am trying to do

Athlete.save(athlete,function(result)
{
       $scope.athlete = result.athlete;
});

The issue is that the $scope.athlete variable does not update in my view. In order to get it to update I have to do this

Athlete.save(athlete,function(result)
{
       $scope.athlete.fname = result.athlete.fname;
       $scope.athlete.lname= result.athlete.lname;
       $scope.athlete.gender= result.athlete.gender;
       ....
});

This gets annoying very quickly. With the first block of code it's as if angular does not know that my $scope.athlete variable has been updated. This function is triggered from an ng-click, not some jquery call, I am doing it the angular way as far as I know.

here is a simpler case I made: http://plnkr.co/edit/lMCPbzqDOoa5K4GXGhCp

what you've shown is fine...create simple demo in plunker or jsfiddle that replicates problem, Try wrapping in `$scope.$apply()`... will throw erorrs if digest already in process but worth a shot — charlietfl, Oct 28 '13 at 01:18
I made a simpler example which also has the issue http://plnkr.co/edit/lMCPbzqDOoa5K4GXGhCp — bsparacino, Oct 28 '13 at 02:42
OK...second case works when you change the individual properties...so what is issue now — charlietfl, Oct 28 '13 at 02:47
`athlete = { fname: 'new fname', lname: 'new lname' };` seems to be creating a new local variable called `athlete`, instead of updating the one you are passing. — winkerVSbecks, Oct 28 '13 at 04:14

score 1 · Answer 1 · answered Oct 28 '13 at 04:18

athlete = { fname: 'new fname', lname: 'new lname' }; seems to be creating a new local variable called athlete, instead of updating the one you are passing.

A better way to handle this would be to pass the $index of the athlete to the updateAthlete() function and do the following:

$scope.updateAthlete = function (index) {
    $scope.athletes[index] = { 
      fname: 'new fname', 
      lname: 'new lname'
    };
};

EDIT: see working plunkr: http://plnkr.co/edit/KPu3CSvGIl8l581r9A5o?p=preview

score 0 · Answer 2 · edited May 23 '17 at 12:10

See this answer:

https://stackoverflow.com/a/13104500/151084

Primitives are passed by value, Objects are passed by "copy of a reference".

Specifically, when you pass an object (or array) you are (invisibly) passing a reference to that object, and it is possible to modify the contents of that object, but if you attempt to overwrite the reference it will not affect the copy of the reference held by the caller - i.e. the reference itself is passed by value.

This explains why plunker doesn't update. However, your inline code example (where you use $scope.athlete = result.athlete) seems like it should work. Can you create a sample showing that failing?

score 0 · Answer 3 · answered Oct 29 '13 at 03:49

I received help from here to solve this: https://groups.google.com/forum/#!msg/angular/Ih06VLDH_JU/EtHLrGeMgUEJ

There are two ways, one was already mentioned and what is to use the index to update the original way.

The second way is to use angular.copy(source, destination)

View is not updating after scope update

3 Answers3