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(’ ');
$ = da;
$scope.button = function(read){

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


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

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


I have been able to solve my problem.

I used $loaded() which returns a promise to check if ReadService has been Loaded then i invoke the ionicLoading.hide();

But i am having one issue with this firebase and ionic loading implementation, Sometimes it works well when internet is OK, but if there is a little break in internet connection of network is bad, The Ionic Loading Stays put on the screen and will refuse to leave and the who APP is will just be like that and noting can be clicked except i exit the app and start it again,
I have tried capturing errors during the promise from the Firebase $loaded but its not still working, this making me tired because , if it was just a normal $http request i would have found away around it.

please does anybody have an idea of what i would do to prevent this App crash on loadind to be occurring