diff --git a/app/assets/javascripts/views/footer/footer-view.pug b/app/assets/javascripts/views/footer/footer-view.pug
index a7ac80e88..ed382b5b0 100644
--- a/app/assets/javascripts/views/footer/footer-view.pug
+++ b/app/assets/javascripts/views/footer/footer-view.pug
@@ -72,8 +72,8 @@
         .sk-label Offline
       .sk-app-bar-item(ng-click='ctrl.refreshData()', ng-if='!ctrl.offline')
         .sk-label Refresh
-      .sk-app-bar-item.border(ng-if='ctrl.dockShortcuts.length > 0')
-      .sk-app-bar-item.dock-shortcut(ng-repeat='shortcut in ctrl.dockShortcuts')
+      .sk-app-bar-item.border(ng-if='ctrl.state.dockShortcuts.length > 0')
+      .sk-app-bar-item.dock-shortcut(ng-repeat='shortcut in ctrl.state.dockShortcuts')
         .sk-app-bar-item-column(
           ng-class="{'underline': shortcut.component.active}", 
           ng-click='ctrl.selectShortcut(shortcut)'
diff --git a/app/assets/javascripts/views/footer/footer_view.ts b/app/assets/javascripts/views/footer/footer_view.ts
index 2d4c1c44f..e14e8171f 100644
--- a/app/assets/javascripts/views/footer/footer_view.ts
+++ b/app/assets/javascripts/views/footer/footer_view.ts
@@ -32,7 +32,12 @@ type DockShortcut = {
   }
 }
 
-class FooterViewCtrl extends PureViewCtrl {
+class FooterViewCtrl extends PureViewCtrl<{}, {
+  outOfSync: boolean;
+  hasPasscode: boolean;
+  dataUpgradeAvailable: boolean;
+  dockShortcuts: DockShortcut[];
+}> {
 
   private $rootScope: ng.IRootScopeService
   private rooms: SNComponent[] = []
@@ -96,7 +101,10 @@ class FooterViewCtrl extends PureViewCtrl {
 
   getInitialState() {
     return {
-      hasPasscode: false
+      outOfSync: false,
+      dataUpgradeAvailable: false,
+      hasPasscode: false,
+      dockShortcuts: [],
     };
   }
 
@@ -379,19 +387,19 @@ class FooterViewCtrl extends PureViewCtrl {
         icon: icon
       } as DockShortcut);
     }
-    this.dockShortcuts = shortcuts.sort((a, b) => {
-      /** Circles first, then images */
-      const aType = a.icon.type;
-      const bType = b.icon.type;
-      if (aType === bType) {
-        return 0;
-      } else if (aType === 'circle' && bType === 'svg') {
-        return -1;
-      } else if (bType === 'circle' && aType === 'svg') {
-        return 1;
-      } else {
-        return 0;
-      }
+    this.setState({
+      dockShortcuts: shortcuts.sort((a, b) => {
+        /** Circles first, then images */
+        const aType = a.icon.type;
+        const bType = b.icon.type;
+        if (aType === 'circle' && bType === 'svg') {
+          return -1;
+        } else if (bType === 'circle' && aType === 'svg') {
+          return 1;
+        } else {
+          return a.name.localeCompare(b.name);
+        }
+      })
     });
   }