Refreshing an image on resume


Hello, I am facing the following problem:

I have an HTML template that displays an image that constantly changes (the server from where it retrieves the image keeps a persistent connection and keeps sending new images every few seconds)

The template code looks like this:

<img src="{{rand}} />

I trap the “resume” event and inside it, I tried doing the following:
$scope.rand = Math.floor((Math.random() * 100000) + 1);
$state.go($state.current, {}, {
reload: true

In other words, I am both trying to change the URL to defeat caching as well as reloading the current state on resume

This code works when I move the app to the background and back. However, if I am viewing the image and press the screen off button and turn it back on again, the image breaks - stops showing. It seems the HTTP connection to the server is terminated and not re-connected.

To work around this, I am doing a ```$window.location.reload();``` which works but flashes the screen.

Is there a better way to reload the image without redrawing the full screen?



Are you testing on iOS? If so, there is an additional event to listen for called “active”. Try treating it the same as “resume”.

Side note: the standard event for an app moving to the background is “pause”. iOS also uses “resign”.


@emily both iOS and Android. The issue is not that resume is not being called. Even if I tap the power button off and turn it on, my resume handler is called. So will trapping another help help? Thanks


Listening for “resume” should help. This is from the Cordova docs on “resign” which is paired with “resume”:

This iOS specific event is available as a variant of the pause event, and is often used to detect when the “Lock” button has been pressed to lock the device when your app is the foreground app. If your app (and device) is enabled for multi-tasking, this will be paired with a subsequent pause event, but only under iOS 5 (effectively all “locked” apps in iOS 5 that have multi-tasking enabled are put to the background).