ionic sometimes not showing list items

Question

I have a strange problem with a mobile application built using Meteor + angular + ionic.

On one of the tabs I subscribe to the collection called Contacts and display the list of contacts in a ionic list:

<ion-list>
    <ion-item ng-repeat="contact in contacts" type="item-text-wrap">
        <strong>{{contact.name}}</strong>
    </ion-item>
</ion-list>

Here is what's in the controller for this tab:

$scope.contacts = $meteor.collection( Contacts );

And here's what I have in the router setup:

...
} ).state( 'tab.contacts', {
    url    : '/contacts',
    views  : {
        'tab-contacts': {
            templateUrl: 'templates/contacts/list.ng.html',
            controller : 'ContactsCtrl'
        }
    },
    resolve: {
        contacts: ['$meteor', function ( $meteor ) {
            return $meteor.subscribe( 'contacts' );
        }]
    }
} )

The problem is that, almost 8 times out of 10, when I open my application the list html elements are rendered but the name and every other contact details are empty as in the picture attached. It's just a list item but the contact itself is undefined:

The number of empty items matches the number of contacts but each contact in that list is null, undefined. I tried every possible trick to make it render correctly and it failed. The number of contacts being rendered are 90 so it's not a big list at all.

If I refresh the page of my app using the chrome usb inspector it renders correctly. What am I missing?

Answer 1

Try this:

resolve: {
    "contacts": ['$meteor', function ( $meteor ) {
        $meteor.subscribe( 'contacts' ).then(function(subscriptionHandle){
            return $meteor.collection( Contacts );
        })
    }]
}

And you don't need this in the controller now $scope.contacts = $meteor.collection( Contacts ); The controller needs to look like this: app.controller( "myCtrl", function( $scope, contacts ) { code... }

$scope.contacts will have the collection returned like that.

Hope it works.