diff --git a/webclient/app-filter.js b/webclient/app-filter.js
index 27f435674..ee9374668 100644
--- a/webclient/app-filter.js
+++ b/webclient/app-filter.js
@@ -79,85 +79,4 @@ angular.module('matrixWebClient')
     return function(text) {
         return $sce.trustAsHtml(text);
     };
-}])
-
-// Compute the room name according to information we have
-.filter('roomName', ['$rootScope', 'matrixService', function($rootScope, matrixService) {
-    return function(room_id) {
-        var roomName;
-
-        // If there is an alias, use it
-        // TODO: only one alias is managed for now
-        var alias = matrixService.getRoomIdToAliasMapping(room_id);
-        if (alias) {
-            roomName = alias;
-        }
-
-        if (undefined === roomName) {
-            // Else, build the name from its users
-            var room = $rootScope.events.rooms[room_id];
-            if (room) {
-                var room_name_event = room["m.room.name"];
-
-                if (room_name_event) {
-                    roomName = room_name_event.content.name;
-                }
-                else if (room.members) {
-                    // Limit the room renaming to 1:1 room
-                    if (2 === Object.keys(room.members).length) {
-                        for (var i in room.members) {
-                            var member = room.members[i];
-                            if (member.state_key !== matrixService.config().user_id) {
-
-                                if (member.state_key in $rootScope.presence) {
-                                    // If the user is available in presence, use the displayname there
-                                    // as it is the most uptodate
-                                    roomName = $rootScope.presence[member.state_key].content.displayname;
-                                }
-                                else if (member.content.displayname) {
-                                    roomName = member.content.displayname;
-                                }
-                                else {
-                                    roomName = member.state_key;
-                                }
-                            }
-                        }
-                    }
-                    else if (1 === Object.keys(room.members).length) {
-                        // The other member may be in the invite list, get all invited users
-                        var invitedUserIDs = [];
-                        for (var i in room.messages) {
-                            var message = room.messages[i];
-                            if ("m.room.member" === message.type && "invite" === message.membership) {
-                                // Make sure there is no duplicate user
-                                if (-1 === invitedUserIDs.indexOf(message.state_key)) {
-                                    invitedUserIDs.push(message.state_key);
-                                }
-                            } 
-                        }
-                        
-                        // For now, only 1:1 room needs to be renamed. It means only 1 invited user
-                        if (1 === invitedUserIDs.length) {
-                            var userID = invitedUserIDs[0];
-
-                            // Try to resolve his displayname in presence global data
-                            if (userID in $rootScope.presence) {
-                                roomName = $rootScope.presence[userID].content.displayname;
-                            }
-                            else {
-                                roomName = userID;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        if (undefined === roomName) {
-            // By default, use the room ID
-            roomName = room_id;
-        }
-
-        return roomName;
-    };
-}]);
+}]);
\ No newline at end of file
diff --git a/webclient/components/matrix/matrix-filter.js b/webclient/components/matrix/matrix-filter.js
new file mode 100644
index 000000000..a9bdbf66d
--- /dev/null
+++ b/webclient/components/matrix/matrix-filter.js
@@ -0,0 +1,100 @@
+/*
+ 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';
+
+angular.module('matrixFilter', [])
+
+// Compute the room name according to information we have
+.filter('mRoomName', ['$rootScope', 'matrixService', function($rootScope, matrixService) {
+    return function(room_id) {
+        var roomName;
+
+        // If there is an alias, use it
+        // TODO: only one alias is managed for now
+        var alias = matrixService.getRoomIdToAliasMapping(room_id);
+        if (alias) {
+            roomName = alias;
+        }
+
+        if (undefined === roomName) {
+            // Else, build the name from its users
+            var room = $rootScope.events.rooms[room_id];
+            if (room) {
+                var room_name_event = room["m.room.name"];
+
+                if (room_name_event) {
+                    roomName = room_name_event.content.name;
+                }
+                else if (room.members) {
+                    // Limit the room renaming to 1:1 room
+                    if (2 === Object.keys(room.members).length) {
+                        for (var i in room.members) {
+                            var member = room.members[i];
+                            if (member.state_key !== matrixService.config().user_id) {
+
+                                if (member.state_key in $rootScope.presence) {
+                                    // If the user is available in presence, use the displayname there
+                                    // as it is the most uptodate
+                                    roomName = $rootScope.presence[member.state_key].content.displayname;
+                                }
+                                else if (member.content.displayname) {
+                                    roomName = member.content.displayname;
+                                }
+                                else {
+                                    roomName = member.state_key;
+                                }
+                            }
+                        }
+                    }
+                    else if (1 === Object.keys(room.members).length) {
+                        // The other member may be in the invite list, get all invited users
+                        var invitedUserIDs = [];
+                        for (var i in room.messages) {
+                            var message = room.messages[i];
+                            if ("m.room.member" === message.type && "invite" === message.membership) {
+                                // Make sure there is no duplicate user
+                                if (-1 === invitedUserIDs.indexOf(message.state_key)) {
+                                    invitedUserIDs.push(message.state_key);
+                                }
+                            } 
+                        }
+                        
+                        // For now, only 1:1 room needs to be renamed. It means only 1 invited user
+                        if (1 === invitedUserIDs.length) {
+                            var userID = invitedUserIDs[0];
+
+                            // Try to resolve his displayname in presence global data
+                            if (userID in $rootScope.presence) {
+                                roomName = $rootScope.presence[userID].content.displayname;
+                            }
+                            else {
+                                roomName = userID;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        if (undefined === roomName) {
+            // By default, use the room ID
+            roomName = room_id;
+        }
+
+        return roomName;
+    };
+}]);
diff --git a/webclient/index.html b/webclient/index.html
index f016dbb87..91b6bf27b 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -29,6 +29,7 @@
     <script src="settings/settings-controller.js"></script>
     <script src="user/user-controller.js"></script>
     <script src="components/matrix/matrix-service.js"></script>
+    <script src="components/matrix/matrix-filter.js"></script>
     <script src="components/matrix/matrix-call.js"></script>
     <script src="components/matrix/matrix-phone-service.js"></script>
     <script src="components/matrix/event-stream-service.js"></script>
diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js
index 4cf501b4e..0f27f7a66 100644
--- a/webclient/recents/recents-controller.js
+++ b/webclient/recents/recents-controller.js
@@ -16,7 +16,7 @@
 
 'use strict';
 
-angular.module('RecentsController', ['matrixService', 'eventHandlerService'])
+angular.module('RecentsController', ['matrixService', 'matrixFilter', 'eventHandlerService'])
 .controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', 
                                function($scope,  matrixService, eventHandlerService) {
     $scope.rooms = {};
diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html
index 4db9e2ae9..a202473dd 100644
--- a/webclient/recents/recents.html
+++ b/webclient/recents/recents.html
@@ -6,7 +6,7 @@
                ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID)}">
             <tr>
                 <td class="recentsRoomName">
-                    {{ room.room_id | roomName }}
+                    {{ room.room_id | mRoomName }}
                 </td>
                 <td class="recentsRoomSummaryTS">
                     {{ (room.lastMsg.ts) | date:'MMM d HH:mm' }}
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index c3f72c9d2..cdef9ab8a 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-angular.module('RoomController', ['ngSanitize', 'mFileInput'])
+angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput'])
 .controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mPresence', 'matrixPhoneService', 'MatrixCall',
                                function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, mPresence, matrixPhoneService, MatrixCall) {
    'use strict';
diff --git a/webclient/room/room.html b/webclient/room/room.html
index 6732a7b3a..493884f60 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -3,7 +3,7 @@
     <div id="roomHeader">
         <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a>
         <div id="roomName">
-            {{ room_id  | roomName }}
+            {{ room_id  | mRoomName }}
         </div>
     </div>