diff --git a/syweb/webclient/app.js b/syweb/webclient/app.js
index 17b2bb6e8f..35190a71f4 100644
--- a/syweb/webclient/app.js
+++ b/syweb/webclient/app.js
@@ -31,6 +31,7 @@ var matrixWebClient = angular.module('matrixWebClient', [
     'eventStreamService',
     'eventHandlerService',
     'notificationService',
+    'recentsService',
     'modelService',
     'infinite-scroll',
     'ui.bootstrap',
diff --git a/syweb/webclient/components/matrix/recents-service.js b/syweb/webclient/components/matrix/recents-service.js
new file mode 100644
index 0000000000..64d1ab93b4
--- /dev/null
+++ b/syweb/webclient/components/matrix/recents-service.js
@@ -0,0 +1,51 @@
+/*
+Copyright 2014 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+/*
+This service manages shared state between *instances* of recent lists. The
+recents controller will hook into this central service to get things like:
+- which rooms should be highlighted
+- which rooms have been binged
+- which room is currently selected
+- etc.
+This is preferable to polluting the $rootScope with recents specific info, and
+makes the dependency on this shared state *explicit*.
+*/
+angular.module('recentsService', [])
+.factory('recentsService', ['$rootScope', function($rootScope) {
+    // notify listeners when variables in the service are updated. We need to do
+    // this since we do not tie them to any scope.
+    var BROADCAST_SELECTED_ROOM_ID = "recentsService:BROADCAST_SELECTED_ROOM_ID";
+    var selectedRoomId = undefined;
+    
+    
+    return {
+        BROADCAST_SELECTED_ROOM_ID: BROADCAST_SELECTED_ROOM_ID,
+    
+        getSelectedRoomId: function() {
+            return selectedRoomId;
+        },
+        
+        setSelectedRoomId: function(room_id) {
+            selectedRoomId = room_id;
+            $rootScope.$broadcast(BROADCAST_SELECTED_ROOM_ID, room_id);
+        }
+    
+    };
+
+}]);
diff --git a/syweb/webclient/index.html b/syweb/webclient/index.html
index f6487f381d..4bca320e77 100644
--- a/syweb/webclient/index.html
+++ b/syweb/webclient/index.html
@@ -44,6 +44,7 @@
     <script src="components/matrix/event-stream-service.js"></script>
     <script src="components/matrix/event-handler-service.js"></script>
     <script src="components/matrix/notification-service.js"></script>
+    <script src="components/matrix/recents-service.js"></script>
     <script src="components/matrix/model-service.js"></script>
     <script src="components/matrix/presence-service.js"></script>
     <script src="components/fileInput/file-input-directive.js"></script>
diff --git a/syweb/webclient/recents/recents-controller.js b/syweb/webclient/recents/recents-controller.js
index 062d106018..78aeca128d 100644
--- a/syweb/webclient/recents/recents-controller.js
+++ b/syweb/webclient/recents/recents-controller.js
@@ -17,8 +17,8 @@
 'use strict';
 
 angular.module('RecentsController', ['matrixService', 'matrixFilter'])
-.controller('RecentsController', ['$rootScope', '$scope', 'eventHandlerService', 'modelService', 
-                               function($rootScope, $scope, eventHandlerService, modelService) {
+.controller('RecentsController', ['$rootScope', '$scope', 'eventHandlerService', 'modelService', 'recentsService',
+                               function($rootScope, $scope, eventHandlerService, modelService, recentsService) {
 
     // Expose the service to the view
     $scope.eventHandlerService = eventHandlerService;
@@ -31,8 +31,11 @@ angular.module('RecentsController', ['matrixService', 'matrixFilter'])
             // room_id: <number>
         };
     }
-
-    // $rootScope.recentsSelectedRoomID is used in the html, and is set by room-controller.
+    
+    $scope.recentsSelectedRoomID = recentsService.getSelectedRoomId();
+    $scope.$on(recentsService.BROADCAST_SELECTED_ROOM_ID, function(ngEvent, room_id) {
+        $scope.recentsSelectedRoomID = room_id;
+    });
     
     
     $scope.selectRoom = function(room) {
@@ -43,12 +46,12 @@ angular.module('RecentsController', ['matrixService', 'matrixFilter'])
     };
     
     $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) {
-        if (isLive && event.room_id !== $rootScope.recentsSelectedRoomID) {
+        if (isLive && event.room_id !== $scope.recentsSelectedRoomID) {
             if (!$rootScope.unreadMessages[event.room_id]) {
                 $rootScope.unreadMessages[event.room_id] = 0;
             }
             $rootScope.unreadMessages[event.room_id] += 1;
-            console.log("sel="+$rootScope.recentsSelectedRoomID+" unread:"+JSON.stringify($rootScope.unreadMessages, undefined, 2));
+            console.log("sel="+$scope.recentsSelectedRoomID+" unread:"+JSON.stringify($rootScope.unreadMessages, undefined, 2));
         }
     });
 
diff --git a/syweb/webclient/room/room-controller.js b/syweb/webclient/room/room-controller.js
index cf6ec08932..ab1772e9e3 100644
--- a/syweb/webclient/room/room-controller.js
+++ b/syweb/webclient/room/room-controller.js
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'angular-peity'])
-.controller('RoomController', ['$modal', '$filter', '$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall', 'notificationService', 'modelService',
-                               function($modal, $filter, $scope, $timeout, $routeParams, $location, $rootScope, matrixService, mPresence, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall, notificationService, modelService) {
+.controller('RoomController', ['$modal', '$filter', '$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventHandlerService', 'mFileUpload', 'matrixPhoneService', 'MatrixCall', 'notificationService', 'modelService', 'recentsService',
+                               function($modal, $filter, $scope, $timeout, $routeParams, $location, $rootScope, matrixService, mPresence, eventHandlerService, mFileUpload, matrixPhoneService, MatrixCall, notificationService, modelService, recentsService) {
    'use strict';
     var MESSAGES_PER_PAGINATION = 30;
     var THUMBNAIL_SIZE = 320;
@@ -804,7 +804,7 @@ angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput', 'a
         console.log("onInit3");
 
         // Make recents highlight the current room
-        $rootScope.recentsSelectedRoomID = $scope.room_id;
+        recentsService.setSelectedRoomId($scope.room_id);
 
         // Init the history for this room
         history.init();