diff --git a/app/assets/javascripts/angular/directives/components/work-package-column-directive.js b/app/assets/javascripts/angular/directives/components/work-package-column-directive.js
index f94705158c..3bc8aafe96 100644
--- a/app/assets/javascripts/angular/directives/components/work-package-column-directive.js
+++ b/app/assets/javascripts/angular/directives/components/work-package-column-directive.js
@@ -1,7 +1,7 @@
 // TODO move to UI components
 angular.module('openproject.uiComponents')
 
-.directive('workPackageColumn', ['PathHelper', function(PathHelper){
+.directive('workPackageColumn', ['PathHelper', 'WorkPackagesHelper', function(PathHelper, WorkPackagesHelper){
   return {
     restrict: 'EA',
     replace: true,
@@ -11,22 +11,10 @@ angular.module('openproject.uiComponents')
     },
     templateUrl: '/templates/components/work_package_column.html',
     link: function(scope, element, attributes) {
-      var data = scope.workPackage[scope.column.name];
       var defaultText = '';
 
-      // Get display text from 'name' if it is an object
-      var displayText = defaultText;
-      switch(typeof(data)) {
-        case 'string':
-          displayText = data;
-          break;
-        case 'object':
-          displayText = data['name'];
-          break;
-      }
-
-      // Set type specific scope
-      scope.displayText = displayText;
+      // Set text to be displayed
+      scope.displayText = WorkPackagesHelper.getRowObjectContent(scope.workPackage, scope.column.name) || defaultText;
 
       switch (scope.column.name){
         case 'subject':
diff --git a/app/assets/javascripts/angular/directives/work_packages/work-package-group-header.js b/app/assets/javascripts/angular/directives/work_packages/work-package-group-header.js
index 9cbf6b0d84..5d4b1aa4fa 100644
--- a/app/assets/javascripts/angular/directives/work_packages/work-package-group-header.js
+++ b/app/assets/javascripts/angular/directives/work_packages/work-package-group-header.js
@@ -1,13 +1,13 @@
 angular.module('openproject.workPackages.directives')
 
-.directive('workPackageGroupHeader', ['WorkPackagesTableHelper', function(WorkPackagesTableHelper) {
+.directive('workPackageGroupHeader', ['WorkPackagesHelper', function(WorkPackagesHelper) {
 
   return {
     restrict: 'A',
     compile: function(tElement) {
       return {
         pre: function(scope, iElement, iAttrs, controller) {
-          scope.currentGroup = WorkPackagesTableHelper.getRowObjectContent(scope.row.object, scope.groupBy); // TODO get group directly from row
+          scope.currentGroup = WorkPackagesHelper.getRowObjectContent(scope.row.object, scope.groupBy); // TODO get group directly from row
 
           pushGroup(scope.currentGroup);
 
diff --git a/app/assets/javascripts/angular/filters/work-package-table-filters.js b/app/assets/javascripts/angular/filters/work-package-table-filters.js
index c3fdd1bdb1..766bd48810 100644
--- a/app/assets/javascripts/angular/filters/work-package-table-filters.js
+++ b/app/assets/javascripts/angular/filters/work-package-table-filters.js
@@ -1,7 +1,7 @@
 angular.module('openproject.workPackages.filters')
 
 // work packages
-.filter('columnContent', ['WorkPackagesTableHelper', function(WorkPackagesTableHelper){
-  return WorkPackagesTableHelper.getRowObjectContent;
+.filter('columnContent', ['WorkPackagesHelper', function(WorkPackagesHelper){
+  return WorkPackagesHelper.getRowObjectContent;
 }]);
 
diff --git a/app/assets/javascripts/angular/helpers/components/work-packages-helper.js b/app/assets/javascripts/angular/helpers/components/work-packages-helper.js
new file mode 100644
index 0000000000..50b43f0e9d
--- /dev/null
+++ b/app/assets/javascripts/angular/helpers/components/work-packages-helper.js
@@ -0,0 +1,20 @@
+angular.module('openproject.uiComponents')
+
+.factory('WorkPackagesHelper', [function() {
+  var WorkPackagesHelper = {
+    getRowObjectContent: function(object, option) {
+      var content = object[option];
+
+      switch(typeof(content)) {
+        case 'string':
+          return content;
+        case 'object':
+          return content.name;
+        default:
+          return '';
+      }
+    }
+  };
+
+  return WorkPackagesHelper;
+}]);
diff --git a/app/assets/javascripts/angular/helpers/work-packages-table-helper.js b/app/assets/javascripts/angular/helpers/work-packages-table-helper.js
index 7f50e145b6..c9f93ad27e 100644
--- a/app/assets/javascripts/angular/helpers/work-packages-table-helper.js
+++ b/app/assets/javascripts/angular/helpers/work-packages-table-helper.js
@@ -26,20 +26,8 @@ angular.module('openproject.workPackages.helpers')
       });
 
       return rows;
-    },
-
-    getRowObjectContent: function(object, option) {
-      var content = object[option];
-
-      switch(typeof(content)) {
-        case 'string':
-          return content;
-        case 'object':
-          return content.name;
-        default:
-          return '';
-      }
     }
+
   };
 
   return WorkPackagesTableHelper;
diff --git a/app/assets/javascripts/angular/openproject-app.js b/app/assets/javascripts/angular/openproject-app.js
index 62bd2c0288..00d6dae71d 100644
--- a/app/assets/javascripts/angular/openproject-app.js
+++ b/app/assets/javascripts/angular/openproject-app.js
@@ -9,9 +9,9 @@ angular.module('openproject.timelines.directives', ['openproject.timelines.model
 // work packages
 angular.module('openproject.workPackages', ['openproject.workPackages.controllers', 'openproject.workPackages.directives', 'openproject.workPackages.filters']);
 angular.module('openproject.workPackages.helpers', []);
-angular.module('openproject.workPackages.filters', ['openproject.workPackages.helpers']);
-angular.module('openproject.workPackages.controllers', []);
-angular.module('openproject.workPackages.directives', ['openproject.workPackages.helpers']);
+angular.module('openproject.workPackages.filters', ['openproject.uiComponents']);
+angular.module('openproject.workPackages.controllers', ['openproject.workPackages.helpers']);
+angular.module('openproject.workPackages.directives', ['openproject.uiComponents']);
 
 
 // global
diff --git a/public/templates/work_packages/work_packages_table.html b/public/templates/work_packages/work_packages_table.html
index 1dea5daef8..871c7703ee 100644
--- a/public/templates/work_packages/work_packages_table.html
+++ b/public/templates/work_packages/work_packages_table.html
@@ -54,7 +54,7 @@
           {{ row.object | columnContent:groupBy || '-' }}
 
           <span class="count">
-            {{ countByGroup[(row.object | columnContent:groupBy)] }}
+            ({{ countByGroup[(row.object | columnContent:groupBy)] }})
 
             <span aria-hidden="true" role="presentation" tabindex="-1">
               <a class="toggle-all" ng-href="#" ng-click="toggleAllGroups()">