diff --git a/frontend/app/layout/query-menu-item-factory.js b/frontend/app/layout/query-menu-item-factory.js
index b91ca51432..e08a0dc466 100644
--- a/frontend/app/layout/query-menu-item-factory.js
+++ b/frontend/app/layout/query-menu-item-factory.js
@@ -49,7 +49,6 @@ module.exports = function(menuItemFactory, $state, $stateParams, $animate, $time
         element.toggleClass('selected', $state.includes('work-packages') &&
                                         (scope.queryId == $stateParams.query_id));
       }
-      $timeout(setActiveState);
       scope.$on('openproject.layout.activateMenuItem', setActiveState);
 
       function removeItem() {
diff --git a/frontend/app/work_packages/controllers/index.js b/frontend/app/work_packages/controllers/index.js
index 429354ee84..feffe5d4cb 100644
--- a/frontend/app/work_packages/controllers/index.js
+++ b/frontend/app/work_packages/controllers/index.js
@@ -109,6 +109,7 @@ angular.module('openproject.workPackages.controllers')
     '$stateParams',
     'QueryService',
     'PathHelper',
+    '$rootScope',
     require('./work-packages-controller')
   ])
   .controller('WorkPackagesListController', [
diff --git a/frontend/app/work_packages/controllers/work-packages-controller.js b/frontend/app/work_packages/controllers/work-packages-controller.js
index 09a48aa668..fa0ee57290 100644
--- a/frontend/app/work_packages/controllers/work-packages-controller.js
+++ b/frontend/app/work_packages/controllers/work-packages-controller.js
@@ -26,7 +26,7 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-module.exports = function($scope, $state, $stateParams, QueryService, PathHelper) {
+module.exports = function($scope, $state, $stateParams, QueryService, PathHelper, $rootScope) {
 
   // Setup
   $scope.$state = $state;
@@ -56,4 +56,5 @@ module.exports = function($scope, $state, $stateParams, QueryService, PathHelper
   $scope.getActivationActionLabel = function(activate) {
     return (activate) ? I18n.t('js.label_activate') : '';
   };
+  $rootScope.$broadcast('openproject.layout.activateMenuItem');
 };
diff --git a/frontend/tests/unit/tests/layout/query-menu-item-factory-test.js b/frontend/tests/unit/tests/layout/query-menu-item-factory-test.js
index 2992eb155d..a61245bb78 100644
--- a/frontend/tests/unit/tests/layout/query-menu-item-factory-test.js
+++ b/frontend/tests/unit/tests/layout/query-menu-item-factory-test.js
@@ -109,21 +109,40 @@ describe('queryMenuItemFactory', function() {
 
     describe('when the query id matches the query id of the state params', function() {
       beforeEach(inject(function($timeout) {
-        stateParams.query_id = objectId;
+        stateParams['query_id'] = objectId;
         $timeout.flush();
       }));
 
       it('marks the new item as selected', function() {
+        $rootScope.$broadcast('openproject.layout.activateMenuItem');
         expect(itemLink.hasClass('selected')).to.be.true;
       });
 
       it('toggles the selected state on state change', function() {
-        stateParams.query_id = null;
+        stateParams['query_id'] = null;
         $rootScope.$broadcast('openproject.layout.activateMenuItem');
 
         expect(itemLink.hasClass('selected')).to.be.false;
       });
     });
+
+    describe('when the query id is undefined', function(){
+      beforeEach(inject(function($timeout) {
+        stateParams['query_id'] = objectId;
+        $timeout.flush();
+      }));
+
+      it('marks the new item as unselected', function() {
+        expect(itemLink.hasClass('selected')).to.be.false;
+      });
+
+      it('toggles the selected state on state change', function() {
+        stateParams['query_id'] = objectId;
+        $rootScope.$broadcast('openproject.layout.activateMenuItem');
+
+        expect(itemLink.hasClass('selected')).to.be.true;
+      });
+    });
   });
 
   describe('#generateMenuItem for the work package index item', function() {
@@ -145,29 +164,31 @@ describe('queryMenuItemFactory', function() {
 
       describe('for an undefined query_id', function() {
         beforeEach(inject(function($timeout) {
-          stateParams.query_id = undefined;
+          stateParams['query_id'] = undefined;
           $timeout.flush();
         }));
 
         it('marks the item as selected', function() {
+          $rootScope.$broadcast('openproject.layout.activateMenuItem');
           expect(itemLink.hasClass('selected')).to.be.true;
         });
       });
 
       describe('for a null query_id', function() {
         beforeEach(inject(function($timeout) {
-          stateParams.query_id = null;
+          stateParams['query_id'] = null;
           $timeout.flush();
         }));
 
         it('marks the item as selected', function() {
+          $rootScope.$broadcast('openproject.layout.activateMenuItem');
           expect(itemLink.hasClass('selected')).to.be.true;
         });
       });
 
       describe('for an integer query_id', function() {
         beforeEach(inject(function($timeout) {
-          stateParams.query_id = 1;
+          stateParams['query_id'] = 1;
           $timeout.flush();
         }));
 
@@ -178,7 +199,7 @@ describe('queryMenuItemFactory', function() {
 
       describe('for a string query_id', function() {
         beforeEach(inject(function($timeout) {
-          stateParams.query_id = "1";
+          stateParams['query_id'] = "1";
           $timeout.flush();
         }));
 
@@ -196,7 +217,7 @@ describe('queryMenuItemFactory', function() {
 
       describe('for an undefined query_id', function() {
         beforeEach(inject(function($timeout) {
-          stateParams.query_id = undefined;
+          stateParams['query_id'] = undefined;
           $timeout.flush();
         }));
 
@@ -207,7 +228,7 @@ describe('queryMenuItemFactory', function() {
 
       describe('for a null query_id', function() {
         beforeEach(inject(function($timeout) {
-          stateParams.query_id = null;
+          stateParams['query_id'] = null;
           $timeout.flush();
         }));