Firebase Request and Ionic Loading

I am pretty new to ionic
please i need help i have a controller that pulls data from a Firebase service, named ReadService and a function getRedings()
i use a controller to pull data from the service to $scope.readings, But i want to use ionic loading to display until the data requested is gotten and displayed.

I can Do this with $http, but i am finding it difficult to do with this firebase setup.

please can anyone help me? below is the controller code.

.controller('readingsCtrl', function($scope, $ionicSideMenuDelegate, ReadService) {

var da = new Date().toString().split(' ').splice(1,3).join(' ');
$scope.date = da;
$scope.button = function(read){

console.log('clciked', read);
ReadService.saveProduct(read, $scope.date);
}

})

.controller('readingsaCtrl', function($scope, $ionicSideMenuDelegate, $ionicLoading, $rootScope, $timeout, ReadService) {
$ionicLoading.show({template: 'Loading ....'});
$scope.logo = $rootScope.logo1;

$timeout(function () {
$ionicLoading.hide();
$scope.readings = ReadService.getReadings();
}, 2000);

})