angularJS $scope change not updating view

Question

I have been banging my head against an angularJS $scope issue. I have an array that I update in a controller function. According to my console logs, the values inside it are indeed changed. However, the view is not updated. Here are the snippets.

//array initialisation

    $scope.fieldSuggestions = []

//modifying function

  $scope.changeCurrentInput = function(fieldName, eye) {
    for(var field in $scope.test){
      console.log($scope.test[field].name)
      if($scope.test[field].name === fieldName){
        console.log($scope.test[field].values)
        console.log("be4 update")
        console.log($scope.fieldSuggestions)
        $scope.fieldSuggestions = $scope.test[field].values;
        console.log("after update")
        console.log($scope.fieldSuggestions)
      }
    }
  };

//view

 <div ng-repeat="choice in fieldSuggestions">       
    <button class="button button-positive">{{choice}}</button>
</div>

MORE DETAILS...

I think this might be relevant. I have a parent view, and several child views. Each of these routes use the same controller. i.e: the property controller in routes.js is the same for all. The button that calls the modifying function is in the child views, but the ng-repeat that does not get updated is in the parent view.

What happens if you push or splice in the list? Is the view updated then? — Patrick
– Patrick, Commented Mar 13, 2016 at 23:55
Are you changing the value in a digest cycle? How and when are you calling the function? — Patrick
– Patrick, Commented Mar 14, 2016 at 8:51
@Patrick I am calling the function from a ng-click on a button. See the extra details i posted in the question. — tarball111
– tarball111, Commented Mar 14, 2016 at 13:31
Uhm, okay. If you are "sharing" variables you should use a service, in order to get the same variable reference between your controllers. If they inherit from each other, you need to put the variable inside a "model" variable, i.e. $scope.model = { fieldSuggestions: [] } in order to avoid variable shadowing — Patrick
– Patrick, Commented Mar 14, 2016 at 14:55

masterspambot · Accepted Answer · 2016-03-13 23:51:05Z

1

Due to fact that you are changing nested properties Angular is not triggering digests. You can simply fix that by adding in link or controller function:

$scope.$watchCollection('fieldSuggestions', function(newFieldSuggestions, oldFieldSuggestions) {
  $scope.fieldSuggestions= newFieldSuggestions;
});

Things to point out: That may be not the most optimal for large collections and complex objects.

edited Mar 13, 2016 at 23:51

answered Mar 13, 2016 at 23:35

masterspambot

5264 silver badges12 bronze badges

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

3 Comments

tarball111 Over a year ago

where do I add this? Tried a few spots without success. And are you sure that i'm "changing nested properties"? I'm not modifying $scope.test, i'm modifying $scope.fieldSuggestions.

masterspambot Over a year ago

Inside your controller/link function in directive.

tarball111 Over a year ago

thank you for your time but it doesnt seem to work. I added it in my controller functions. right after angular.module('examWriteCtrl', []).controller('examWriteCtrl', ['$scope', ...

tarball111 · Accepted Answer · 2016-03-15 00:31:43Z

1

Turns out I was shadowing the parent fieldSuggestions variable by declaring my child controllers as being the same one as the parent. The solution was to not redeclare the controller on the child routes as it sees the parent one automatically.

Thanks everyone who helped.

answered Mar 15, 2016 at 0:31

tarball111

838 bronze badges

Comments

KCFragrance · Accepted Answer · 2016-03-14 06:53:14Z

0

I think because of nesting change it can't update the value at that time.You can use $scope.$apply() to get the latest updated value Like.... $scope.$apply($scope.fieldSuggestions = $scope.test[field].values);

answered Mar 14, 2016 at 6:53

KCFragrance

1586 bronze badges

Collectives™ on Stack Overflow

angularJS $scope change not updating view

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related