Angularjs scope array not shown when data is in

Question

I have scope array property. I'm filling in the data by calling ajax service. What is happening is that even the data is populated in the array as expected I need to focus some other control or click somewhere on the page in order to display the array.

This is the array I have:

<ul class="list-group">
  <li class="list-group-item" ng-repeat="address in proposaladdresses">
    {{address.FormattedAddress}}
    <input type="button" ng-click="SubmitAddress(address.RefId, $parent.$index)" class="btn btn-success btn-sm pull-right" value="Select"/>
  </li>
</ul>

Array is populated this way:

$scope.proposaladdresses = [];
$.ajax({
  url: url,
  dataType: "jsonp",
  data: {
    "key": 'dasdasdas',
    "AddressLine": $scope.CustomAddress,
  },
  success: function (data) {
    if (data) {
      $scope.proposaladdresses = data;
    }
  },
});

Any idea why I need to do one more extra step in order to see the data on the screen?

I think you have the problem with a data binding. Maybe $scope.$apply method called after $.ajax.success will fix this problem. Ofcourse it's better to use $http instead of jQuery $.ajax — plvice
– plvice, Commented Feb 14, 2017 at 9:32

Sajeetharan · Accepted Answer · 2017-02-14 09:30:33Z

1

Try calling

 if (data) {
  $scope.proposaladdresses = data;
  $scope.$apply();
}

answered Feb 14, 2017 at 9:30

Sajeetharan

223k65 gold badges369 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Angularjs scope array not shown when data is in

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related