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?

Answer 1

Try calling

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