diff --git a/webclient/room/room-directive.js b/webclient/room/room-directive.js
index 8db4cb5d9accde5fed35b84e89bc7490c5f1faa0..d5108b5f1c337748244539ff1ef35acbff5063f8 100644
--- a/webclient/room/room-directive.js
+++ b/webclient/room/room-directive.js
@@ -135,6 +135,21 @@ angular.module('RoomController')
         });
     };
 }])
+.directive('commandHistory', [ function() {
+    return function (scope, element, attrs) {
+        element.bind("keydown keypress", function (event) {
+            var keycodePressed = event.which;
+            var UP_ARROW = 38;
+            var DOWN_ARROW = 40;
+            if (keycodePressed === UP_ARROW) {
+                scope.history.goUp(event);
+            }
+            else if (keycodePressed === DOWN_ARROW) {
+                scope.history.goDown(event);
+            } 
+        });
+    }
+}])
 
 // A directive to anchor the scroller position at the bottom when the browser is resizing.
 // When the screen resizes, the bottom of the element remains the same, not the top.
diff --git a/webclient/room/room.html b/webclient/room/room.html
index c807e2afe121943def38eb0c3a5997f59e31edfe..2786246232c85c49cf2908c3b230e646d63cfc34 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -163,8 +163,7 @@
                     <td width="*">
                         <textarea id="mainInput" rows="1" ng-enter="send()"
                                   ng-disabled="state.permission_denied"
-                                  ng-keydown="(38 === $event.which) ? history.goUp($event) : ((40 === $event.which) ? history.goDown($event) : 0)"
-                                  ng-focus="true" autocomplete="off" tab-complete/>
+                                  ng-focus="true" autocomplete="off" tab-complete command-history/>
                     </td>
                     <td id="buttonsCell">
                         <button ng-click="send()" ng-disabled="state.permission_denied">Send</button>