diff --git a/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.controller.ts b/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.controller.ts
index 5fd0d5d911..6f965d7aaa 100644
--- a/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.controller.ts
+++ b/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.controller.ts
@@ -29,26 +29,25 @@
 import {wpButtonsModule} from '../../../angular-modules';
 
 export default class WorkPackageCreateButtonController {
-  public projectIdentifier: string;
-  public text: any;
-  public types: any;
+  public projectIdentifier:string;
+  public text:any;
+  public types:any;
+  public stateName:string;
 
   public allowed;
 
-  public get inProjectContext() {
-    return !!this.projectIdentifier;
-  }
-
-  constructor(
-    protected $state,
-    protected I18n
-  ) {
+  constructor(protected $state,
+              protected I18n) {
     this.text = {
       button: I18n.t('js.label_work_package'),
       create: I18n.t('js.label_create_work_package')
     };
   }
 
+  public createWorkPackage() {
+    this.$state.go(this.stateName, {projectPath: this.projectIdentifier});
+  }
+
   public isDisabled() {
     return !this.allowed || this.$state.includes('**.new');
   }
diff --git a/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.html b/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.html
index 6530fb29b9..45d0053663 100644
--- a/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.html
+++ b/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.html
@@ -1,10 +1,10 @@
 <div class="wp-create-button">
   <button class="button -alt-highlight add-work-package"
-          ui-sref="{{ vm.stateName }}({ projectPath: vm.projectIdentifier })"
-          ng-disabled="vm.isDisabled()"
-          aria-label="{{ ::vm.text.create }}">
+          ng-click="$ctrl.createWorkPackage()"
+          ng-disabled="$ctrl.isDisabled()"
+          aria-label="{{ ::$ctrl.text.create }}">
 
     <i class="button--icon icon-add"></i>
-    <span class="button--text" ng-bind="::vm.text.button" aria-hidden="true"></span>
+    <span class="button--text" ng-bind="::$ctrl.text.button" aria-hidden="true"></span>
   </button>
 </div>
diff --git a/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.ts b/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.ts
index e8eb74fbdd..b288f5cf20 100644
--- a/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.ts
+++ b/frontend/app/components/wp-buttons/wp-create-button/wp-create-button.directive.ts
@@ -40,7 +40,7 @@ function wpCreateButton() {
     },
 
     bindToController: true,
-    controllerAs: 'vm',
+    controllerAs: '$ctrl',
     controller: 'WorkPackageCreateButtonController'
   }
 }