AngularJS: Scope variable not updating in view -

AngularJS: Scope variable not updating in view -

it seems view variable not updating on onsubmit event. can see in console performed phone call api gets right results, 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 tried $scope.$apply() still getting same result. there chance have more 1 scopes around?

thank you.

@mohammad sepahvand right new scopes created using ng-if , ng-include, however, recommend avoid using $parent. think can create code brittle , harder maintain.

child scopes inherit properties parent scopes through prototypical inheritance. "old" angular saying "putting dot in model" suggests in parent scope (in controller):

$scope.model = { foomodel: null };

this declares model object survive prototypical inheritance. without having "dot in model" properties of kid scopes shadow values in parent scope.

when $promise resolved, set new value on $scope.model.foomodel.

while same thing using $parent.foomodel, using $parent means you're depending on parent kid relationship (it makes me sense dirty). happens if refactor html view later resulting in more/less parent/child relationships?

angularjs