Angular md-virtual-repeat is not updating changed data

Question

I'm using angular md-virtual-repeat to load listings in my container and its working fine as the listings are not being changed. When i update the listings on specific event id's, the $scope.listings get updated correctly but the listings don't change in view. And when i do scrolling, they get updated.

It seems like it doesn't get the trigger of data change. Is there any solution to refresh md-virtual-repeat when data updates ?

<div id="listingsScrollArea" md-virtual-repeat-container>
   <table>
      <tbody id="listings_body">
        <tr md-virtual-repeat="listing in listings | listingsSort:sortType:sortReverse:searchFields:filterListingsBy:false" class="repeated-item" ng-click="dosomething(listing)">
            <td ng-if="listing.isListing">{{ ::listing.x }}</td>
            ...
            <td ng-if="listing.isListing">{{ ::listing.y }}</td>
        </tr>
     </tbody>
  </table>
</div>

ListingsController method to get listings. Listings get updated by re-runing this method.

$scope.getListings = function(event_ids, pageNo) {
   var deferred = $q.defer();
   $scope.isListingsLoading = true;

   ListingsFactory.getListings(event_ids, pageNo).then(function(data) {
      $scope.listings = data.data;
      $scope.listings_info = data.info;
      $scope.isListingsLoading = false;
      deferred.resolve(data);
   }, function(data) {
      deferred.reject(data);
   });

   return deferred.promise;
};

Answer 1

Looks like you're using one-time binding. That does not mix well with md-virtual-repeat. Try changing this:

<td ng-if="listing.isListing">{{ ::listing.x }}</td>

into this:

<td ng-if="listing.isListing">{{ listing.x }}</td>

Hope this helps.

Answer 2

try this,

$scope.getListings = function(event_ids, pageNo) {
    var deferred = $q.defer();
    $scope.isListingsLoading = true;

    ListingsFactory.getListings(event_ids, pageNo).then(function(data) {
        deferred.resolve(data);
    }, function(data) {
        deferred.reject(data);
    });

    return deferred.promise;
};

$scope.getListings.then(function(data) {
    $scope.listings = data.data;
    $scope.listings_info = data.info;
    $scope.isListingsLoading = false;
});