Page freeze and $resource

So when my page loads, angular calls a service to populate three arrays. This service uses $resource to fetch data (JSON) from the backend. The problem is, while the data is loading the whole page freezes for a second and the spinners are static. My understanding is that $resource and $http are all asynchronous and the page shouldn't freeze when they're active. I've tried the promise pattern approach suggested by this article but without luck. Any advice? Thanks in advance!

Edit: added the code

mobiModule.factory('DataSrv', function($q, $http) {
    return {
        getData: function(url) {
            var defered = $q.defer();

            //make the call
            $http.get(url).success(function(data){
                console.dir(data);
                defered.resolve(data);
            }).error(function(){
                console.log('HTTP error');
                defered.reject();
            });

            return defered.promise;
        }
    }
});   



$scope.phones = Phones.query(); //using $resource('phones.json') 

or

$scope.phones = DataSrv.getData('phones.json'); //using the service defined above