AngularJS: Scope variable not updating in view

Question

It seems that my view variable is not updating on the onSubmit event. I can see in console that the performed call to an API gets the correct results, but I do not display them properly.

JS

     angular.module('FooApp')
     .controller('FooListController', ['$scope', 'FooMapper', 'moment', 'APP_URL', '$location', function($scope, FooMapper, moment, APP_URL, $location) {


         $scope.submit = function (){

             var promise = FooMapper.find($scope.fooName);

             console.log('-- Search string: '+ $scope.fooName);
             $scope.isLoading = 0;
             promise.then(function(foo){

                 console.log('New Promise foo: ', foo);
                 $scope.fooResults = foo;

             })
         } // end of anonymous function

}
]);

HTML

<div ng-include="APP_URL + '/view/fooResolver/searchForm.html'" ng-controller="FooListController">   </div>
    <div ng-if="!isLoading" class="row">

        <div ng-if="!fooResults" class="col-md-12">
            <div class="alert alert-warning">
                No foos found.
            </div>
        </div>

        <div ng-if="fooResults" class="col-md-12">

                        <tr ng-repeat="foo in fooResults" class="active">

                            <td>
                                {{foo.id}}
                            </td>
                            <td>
                                <b>{{foo.name}}</b>
                            </td>
                            <td>
                                {{foo.country}}
                            </td>
    ....

I have also tried with $scope.$apply() but still getting the same result. Is there any chance that I have more than one scopes around?

Thank you.

looks correct to me, you need to make sure the return is an actual javascript object and that it is of the correct form — tommybananas
– tommybananas, Commented Oct 6, 2014 at 16:06
@snowman4415 The returned value is in correct format, I am also using FooResults: {{$parent.fooResults}} to check that I have the data, but no luck yet. DhanaKrishnasamy At the very end of the controller. — thitami
– thitami, Commented Oct 6, 2014 at 16:16

Sunil D. · Accepted Answer · 2014-10-06 16:38:49Z

1

@Mohammad Sepahvand is correct about the new scopes created by using ng-if and ng-include, however, I would recommend you avoid using $parent. I think this can create code that is brittle and harder to maintain.

Child scopes inherit properties from parent scopes through prototypical inheritance. The "old" Angular saying about "putting a dot in your model" suggests you do something like this in the parent scope (in your controller):

$scope.model = { fooModel: null };

This declares a model object that will survive prototypical inheritance. Without having a "dot in your model" the properties of the child scopes will shadow the values in the parent scope.

When your $promise is resolved, you then set a new value on $scope.model.fooModel.

While this is effectively the same thing as using $parent.fooModel, using $parent means you're depending on this parent child relationship (it makes me feel dirty). What happens if you refactor the HTML view later resulting in more/less parent/child relationships?

answered Oct 6, 2014 at 16:38

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

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

9 Comments

thitami Over a year ago

Thanks for your detailed reply. Correct me if I am wrong, I have tried this in my Controller: $scope.model = { fooResults: null }; and does not work. Have I understood it incorrectly? Although, I am still not in position to see any results, the table layout has been appeared.

Sunil D. Over a year ago

When the promise is resolved, do you then update $scope.model.fooModel to contain the new value? You also need to change the ng-repeat in the HTML to be ng-repeat="foo in model.fooModel" ... OOPS: I used "fooModel" when your code used "fooResults". But the concept is still correct.

Sunil D. Over a year ago

PS: You have other references to "fooResults" in your HTML that would also need to be changed to the new format: "model.fooResults" The point of this exercise is that b/c of prototypical inheritance you need to use an object, to avoid variables being "shadowed" when they are inherited in other scopes.

thitami Over a year ago

I am probably missing something obvious. This is what I am declaring at the top of my controller: $scope.fooResults = { fooResults: null }; This is what I am assigning onSubmit and after retrieving the data: $scope.fooResults = foos; // foos is local variable, within the anonymous function, which contains my data. And now, I was expecting to be able to access {{fooResults}} in my HTML, which does not really happen.

Sunil D. Over a year ago

The object you're declaring has two properties named fooResults, so after retrieving the data you want to assign a value to the inner property: $scope.fooResults.fooResults = foos; Then you need to access the data in the HTML using fooResults.fooResults. It would be more clear if you gave the outer property a different name :)

|

Collectives™ on Stack Overflow

AngularJS: Scope variable not updating in view

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related