diff --git a/res/app/components/stf/page-visibility/index.js b/res/app/components/stf/page-visibility/index.js
index 5de1e9f3..5c2ac72c 100644
--- a/res/app/components/stf/page-visibility/index.js
+++ b/res/app/components/stf/page-visibility/index.js
@@ -1,4 +1,4 @@
 module.exports = angular.module('stf.page-visibility', [
 
 ])
-  .directive('pageVisibility', require('./page-visibility-directive'))
+  .factory('PageVisibilityService', require('./page-visibility-service'))
diff --git a/res/app/components/stf/page-visibility/page-visibility-directive.js b/res/app/components/stf/page-visibility/page-visibility-directive.js
deleted file mode 100644
index 36572524..00000000
--- a/res/app/components/stf/page-visibility/page-visibility-directive.js
+++ /dev/null
@@ -1,26 +0,0 @@
-module.exports = function pageVisibilityDirective($document, $rootScope) {
-  return {
-    restrict: 'A',
-    link: function (scope) {
-      function pageVisibilityChanged() {
-        if (document.hidden) {
-          $rootScope.$broadcast('pageHidden')
-        } else {
-          $rootScope.$broadcast('pageVisible')
-          // Application is visible to the user
-          // Adjust polling rates and display update for active display mode
-        }
-      }
-
-      document.addEventListener(
-        'visibilitychange'
-      , pageVisibilityChanged
-      , false
-      )
-
-      scope.$on('$destroy', function () {
-        angular.element(document).unbind('visibilitychange');
-      })
-    }
-  }
-}
diff --git a/res/app/components/stf/page-visibility/page-visibility-service.js b/res/app/components/stf/page-visibility/page-visibility-service.js
new file mode 100644
index 00000000..1f0e71c4
--- /dev/null
+++ b/res/app/components/stf/page-visibility/page-visibility-service.js
@@ -0,0 +1,15 @@
+module.exports = function PageVisibilityServiceFactory($rootScope) {
+  var service = {}
+
+  function visibilityChangeListener() {
+    $rootScope.$broadcast('visibilitychange', document.hidden)
+  }
+
+  document.addEventListener(
+    'visibilitychange'
+  , visibilityChangeListener
+  , false
+  )
+
+  return service
+}
diff --git a/res/app/components/stf/page-visibility/page-visibility-spec.js b/res/app/components/stf/page-visibility/page-visibility-spec.js
deleted file mode 100644
index 9a431915..00000000
--- a/res/app/components/stf/page-visibility/page-visibility-spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-describe('pageVisibility', function () {
-
-  beforeEach(module('stf.page-visibility'));
-
-  var scope, compile;
-
-  beforeEach(inject(function ($rootScope, $compile) {
-    scope = $rootScope.$new();
-    compile = $compile;
-  }));
-
-  it('should ...', function () {
-
-    /*
-     To test your directive, you need to create some html that would use your
-     directive, send that through compile() then compare the results.
-
-     var element = compile('<div page-visibility name="name">hi</div>')(scope);
-     expect(element.text()).toBe('hello, world');
-     */
-
-  });
-});
diff --git a/res/app/components/stf/screen/index.js b/res/app/components/stf/screen/index.js
index 4d022d81..6c2e9b3b 100644
--- a/res/app/components/stf/screen/index.js
+++ b/res/app/components/stf/screen/index.js
@@ -1,6 +1,7 @@
 module.exports = angular.module('stf/screen', [
   require('stf/screen/scaling').name
 , require('stf/util/vendor').name
+, require('stf/page-visibility').name
 ])
   .directive('deviceScreen', require('./screen-directive'))
   .controller('DeviceScreenCtrl', require('./screen-controller'))
diff --git a/res/app/components/stf/screen/screen-directive.js b/res/app/components/stf/screen/screen-directive.js
index 2efc14cf..0ef9ccae 100644
--- a/res/app/components/stf/screen/screen-directive.js
+++ b/res/app/components/stf/screen/screen-directive.js
@@ -4,6 +4,7 @@ module.exports = function DeviceScreenDirective(
   $document
 , ScalingService
 , VendorUtil
+, PageVisibilityService
 ) {
   return {
     restrict: 'E',
@@ -241,6 +242,15 @@ module.exports = function DeviceScreenDirective(
         }
       })
 
+      scope.$on('visibilitychange', function(e, hidden) {
+        if (hidden) {
+          off()
+        }
+        else {
+          on()
+        }
+      })
+
       scope.$watch('device.display.orientation', function(r) {
         rotation = r || 0
       })