Delaying AngularJS route change until model loaded to prevent flicker

Question

I am wondering if there is a way (similar to Gmail) for AngularJS to delay showing a new route until after each model and its data has been fetched using it

Answer 1

Using AngularJS 1.1.5

Updating the 'phones' function in Justen's answer using AngularJS 1.1.5 syntax.

Original:

phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
}

Updated:

phones: function(Phone) {
    return Phone.query().$promise;
}

Much shorter thanks to the Angular team and contributors. :)

This is also the answer of Maximilian Hoffmann. Apparently that commit made it into 1.1.5.