diff --git a/frontend/app/components/routes/controllers/work-package-show.controller.js b/frontend/app/components/routes/controllers/work-package-show.controller.js
index df55adbd9f..b975752972 100644
--- a/frontend/app/components/routes/controllers/work-package-show.controller.js
+++ b/frontend/app/components/routes/controllers/work-package-show.controller.js
@@ -229,16 +229,6 @@ function WorkPackageShowController($scope, $rootScope, $state, latestTab, workPa
     });
   };
 
-  $scope.closeShowView = function() {
-    var queryProps = $state.params['query_props'];
-
-    $state.go('work-packages.list', {
-      projectPath: $scope.projectIdentifier,
-      workPackageId: $scope.workPackage.props.id,
-      'query_props': queryProps
-    });
-  };
-
   function getFocusAnchorLabel(tab, workPackage) {
     var tabLabel = I18n.t('js.work_packages.tabs.' + tab),
         params = {
diff --git a/frontend/app/components/routes/controllers/work-packages-list.controller.js b/frontend/app/components/routes/controllers/work-packages-list.controller.js
index e0c1e37df0..8a107c6ae0 100644
--- a/frontend/app/components/routes/controllers/work-packages-list.controller.js
+++ b/frontend/app/components/routes/controllers/work-packages-list.controller.js
@@ -296,12 +296,6 @@ function WorkPackagesListController($scope, $rootScope, $state, $stateParams, $l
     loadingIndicator.on(promise);
   };
 
-  $scope.closeDetailsView = function() {
-    var queryProps = $state.params['query_props'];
-
-    $state.go('work-packages.list', { 'query_props': queryProps});
-  };
-
   $scope.showWorkPackageDetails = function(id, force) {
     if (force || $state.current.url != "") {
       var promise = $state.go(latestTab.getStateName(), {
diff --git a/frontend/app/components/routes/partials/work-packages.list.html b/frontend/app/components/routes/partials/work-packages.list.html
index 365662656a..84521d4a67 100644
--- a/frontend/app/components/routes/partials/work-packages.list.html
+++ b/frontend/app/components/routes/partials/work-packages.list.html
@@ -29,20 +29,7 @@
       <li class="toolbar-item" feature-flag="detailsView">
         <ul id="work-packages-view-mode-selection" class="toolbar-button-group">
           <li>
-            <label for="work-packages-list-view-button"
-                   ng-attr-accesskey="{{ !isDetailsViewActive() ? undefined : '8' }}"
-                   class="hidden-for-sighted">
-              {{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}
-            </label>
-            <button id="work-packages-list-view-button"
-                    ng-disabled="editAll.state"
-                    class="button"
-                    title="{{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}"
-                    ng-click="closeDetailsView()"
-                    ng-class="{ '-active': !isDetailsViewActive() }">
-              <i class="icon-view-list button--icon"></i>
-              <span class="hidden-for-sighted">{{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}</span>
-            </button>
+            <wp-list-view-button></wp-list-view-button>
           </li>
           <li feature-flag="detailsView">
             <label for="work-packages-details-view-button"
diff --git a/frontend/app/components/routes/partials/work-packages.show.html b/frontend/app/components/routes/partials/work-packages.show.html
index 36ca4a73a1..3d4aacec2e 100644
--- a/frontend/app/components/routes/partials/work-packages.show.html
+++ b/frontend/app/components/routes/partials/work-packages.show.html
@@ -22,20 +22,7 @@
         <li class="toolbar-item" feature-flag="detailsView">
           <ul id="work-packages-view-mode-selection" class="toolbar-button-group">
             <li>
-              <label for="work-packages-list-view-button"
-                     ng-attr-accesskey="{{ isListViewActive() ? undefined : '8' }}"
-                     class="hidden-for-sighted">
-                {{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}
-              </label>
-              <button id="work-packages-list-view-button"
-                      ng-disabled="editAll.state"
-                      class="button"
-                      title="{{ getActivationActionLabel(!isListViewActive()) + ' ' + I18n.t('js.button_list_view') }}"
-                      ng-click="closeShowView()"
-                      ng-class="{ '-active': isListViewActive() }">
-                <i class="icon-view-list button--icon"></i>
-                <span class="hidden-for-sighted">{{ getActivationActionLabel(!isListViewActive()) + ' ' + I18n.t('js.button_list_view') }}</span>
-              </button>
+              <wp-list-view-button></wp-list-view-button>
             </li>
             <li feature-flag="detailsView">
               <label for="work-packages-details-view-button"
diff --git a/frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.html b/frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.html
new file mode 100644
index 0000000000..3929384e84
--- /dev/null
+++ b/frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.html
@@ -0,0 +1,14 @@
+<label for="work-packages-list-view-button"
+       ng-attr-accesskey="{{ isActive() ? undefined : '8' }}"
+       class="hidden-for-sighted">
+  {{ getActivationActionLabel(!isActive()) + ' ' + I18n.t('js.button_list_view') }}
+</label>
+<button id="work-packages-list-view-button"
+        ng-disabled="editAll.state"
+        class="button"
+        title="{{ getActivationActionLabel(!isActive()) + ' ' + I18n.t('js.button_list_view') }}"
+        ng-click="openListView()"
+        ng-class="{ '-active': isActive() }">
+  <i class="icon-view-list button--icon"></i>
+  <span class="hidden-for-sighted">{{ getActivationActionLabel(!isActive()) + ' ' + I18n.t('js.button_list_view') }}</span>
+</button>
diff --git a/frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.js b/frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.js
new file mode 100644
index 0000000000..0da446cbeb
--- /dev/null
+++ b/frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.js
@@ -0,0 +1,54 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+// ++
+
+angular
+  .module('openproject.workPackages.directives')
+  .directive('wpListViewButton', wpListViewButton);
+
+function wpListViewButton() {
+  return {
+    restrict: 'E',
+    templateUrl: '/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.html',
+
+    controller: WorkPackageListViewButtonController
+  };
+}
+
+function WorkPackageListViewButtonController($scope, $state) {
+  $scope.isActive = function () {
+    return $state.is('work-packages.list');
+  };
+
+  $scope.openListView = function () {
+    $state.go('work-packages.list', {
+      projectPath: $scope.projectIdentifier,
+      query_props: $state.params['query_props']
+    });
+  };
+
+}
diff --git a/frontend/app/work_packages/controllers/work-packages-controller.js b/frontend/app/work_packages/controllers/work-packages-controller.js
index 8619ab1db5..5ac57a44dd 100644
--- a/frontend/app/work_packages/controllers/work-packages-controller.js
+++ b/frontend/app/work_packages/controllers/work-packages-controller.js
@@ -46,10 +46,6 @@ module.exports = function($scope, $state, $stateParams, QueryService, PathHelper
     return $state.includes('work-packages.list.details') || inplaceEditAll.state;
   };
 
-  $scope.isListViewActive = function() {
-    return $state.is('work-packages.list');
-  };
-
   $scope.getToggleActionLabel = function(active) {
     return (active) ? I18n.t('js.label_deactivate') : I18n.t('js.label_activate');
   };