$ionicLoading with Angular UI Router resolves

I'm trying to use $ionicLoading with Angular UI Router resolves. The idea being that when a new route/state is requested the loading modal appears while the data is being resolved, then disappears when the resolve completes and the new state is instantiated.

router

.state('tab.locations', {
  url: '/locations',
  cache: false,
  views: {
    'locations-tab': {
      templateUrl: 'js/locations/tab-locations.html',
      controller: 'LocationsCtrl as vm'
    }
  },
  resolve: {
    locationsResource: 'Locations',
    locations: function(locationsResource) {
      return locationsResource.all();
    }
  }
})

Without the resolve, one recommended method is to use $httpProvider.interceptors to broadcast events to show and hide the loading screen. Like this:

$ionicConfigProvider

$httpProvider.interceptors.push(function($rootScope) {
  return {
    request: function(config) {
      $rootScope.$broadcast('loading:show');
      return config
    },
    response: function(response) {
      $rootScope.$broadcast('loading:hide');
      return response
    }
  }
})

runBlock

$rootScope.$on('loading:show', function() {
  $ionicLoading.show({template: '<ion-spinner></ion-spinner>'})
});

$rootScope.$on('loading:hide', function() {
  $ionicLoading.hide()
});

This works great when not using resolves. But when resolves work the loading screen no longer appears.

I have tried broadcasting loading:show on $stateChangeStart if a resolve is present but that also does not work.

Are there other interceptors or state change events I should be broadcasting loading:show and loading:hide on to make $ionicLoading work with resolves?