Angularjs ng-repeat does not update after changing $scope variable

Question

Hi I am new to Angularjs. I am changing the $scope variable on dropdown list selection. that scope variable is used for ng-repeat on div.

html code:

<div class="col-md-6" ng-repeat="model in FilteredModels | filter:{ModelText : '!All models'}:true">
 <div class="well">
 <div class="media">
 <div class="media-object small"><i class="pp-car"></i></div>
 <div class="media-body"> 
 <div class="text-box"> 
 <h3>{{model.ModelText}}</h3><span class="hr-small"></span>
 </div>
 <div class="dashboard-control clearfix">
 <div class="simple-metric text-left sub-metric">
 <div class="metric-title">Satisfaction score</div>
 <div class="metric-number text-red">{{model.SatisfactionAvg | number:2}}</div>
 </div>
 <div class="simple-metric text-left sub-metric">
 <div class="metric-title">Total interviews</div>
 <div class="metric-number">{{model.TotalInterviews}}</div>
 </div>
 </div>
 <ul class="list-standard">
 <li> <a href="" ng-click="openModal($index)" class="text-black trigger-model-interviews">View interviews</a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>

angularjs code :

function filtermodelbyId() {
 $scope.FilteredModels = [];
 dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
 $scope.FilteredModelIds = result.data;
 });
 if ($scope.FilteredModelIds != null && $scope.FilteredModelIds.length > 0) {
 for (var j = $scope.FilteredModelIds.length - 1; j >= 0; j--) {
 for (var i = $scope.models.length - 1; i >= 0; i--) {
 if ($scope.models[i].ModelId == $scope.FilteredModelIds[j]) {
 $scope.FilteredModels.push($scope.models[i]);
 }
 }
 }
 }
}

On change of dropdown list this filtermodelbyId() function gets call and i am pushing new values but this gets reflected after the second change on dropdown list.

is there any better way to represent this.

Thanks.

• Stewie: possible duplicate of How to return the response from an AJAX call?

Answer 1

Seems like you are not using $http in dataFactory.getModelIdByFilter . try using

$scope.$apply(function(){
 $scope.FilteredModelIds = result.data;
});

Or else you can use angular services to load data (Assuming that you are using jquery ajax.)

Answer 2

You need to write if after $scope.FilteredModelIds is set

dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
 $scope.FilteredModelIds = result.data;
 if ($scope.FilteredModelIds != null && $scope.FilteredModelIds.length > 0) {
 for (var j = $scope.FilteredModelIds.length - 1; j >= 0; j--) {
 for (var i = $scope.models.length - 1; i >= 0; i--) {
 if ($scope.models[i].ModelId == $scope.FilteredModelIds[j]) {
 $scope.FilteredModels.push($scope.models[i]);
 }
 }
 }
 }
});

Answer 3

Just of quick wild guess:

function filtermodelbyId() {
 $scope.FilteredModels = [];
 dataFactory.getModelIdByFilter($scope.region, $scope.subregion).success($scope.handleSuccess).then(function (result) {
 $scope.FilteredModelIds = result.data;
 if ($scope.FilteredModelIds != null && $scope.FilteredModelIds.length > 0) {
 for (var j = $scope.FilteredModelIds.length - 1; j >= 0; j--) {
 for (var i = $scope.models.length - 1; i >= 0; i--) {
 if ($scope.models[i].ModelId == $scope.FilteredModelIds[j]) {
 $scope.FilteredModels.push($scope.models[i]);
 }
 }
 }
 }
 });
}

Change the model array in the callback.

• Samir Shah: That's what issue is the array doesnt set on callback so i am getting response of previous select.