diff --git a/app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js b/app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js
index da4b94b349..54819dc004 100644
--- a/app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js
+++ b/app/assets/javascripts/angular/work_packages/controllers/work-package-details-controller.js
@@ -59,7 +59,16 @@ angular.module('openproject.workPackages.controllers')
     $scope.workPackage = workPackage;
     $scope.$parent.preselectedWorkPackageId = $scope.workPackage.props.id;
     $scope.maxDescriptionLength = 800;
-
+    $scope.isWatched = !!workPackage.links.unwatch;
+    $scope.watchLink = (workPackage.links.watch === undefined) ?
+      workPackage.links.unwatch : workPackage.links.watch;
+
+    $scope.toggleWatch = function(link) {
+      console.log(link);
+      link.fetch().then(function() {
+        $scope.isWatched = !$scope.isWatched;
+      });
+    }
 
     // resources for tabs
 
diff --git a/public/templates/work_packages.list.details.html b/public/templates/work_packages.list.details.html
index ea688033e0..a4bccfc25a 100644
--- a/public/templates/work_packages.list.details.html
+++ b/public/templates/work_packages.list.details.html
@@ -30,8 +30,8 @@
 
   <h2 ng-bind="workPackage.props.subject"></h2>
   <span class="subtitle">
-    <i class="star icon-star1"/>
-    <a href>#{{ workPackage.props.id }}</a>
+    <i class="star icon-star1" ng-class="{active: isWatched}" ng-click="toggleWatch(watchLink)" />
+    <a href="#">#{{ workPackage.props.id }}</a>
     <span ng-bind="I18n.t('js.label_added_by')"/>
     <a ng-href="{{ userPath(author.props.id) }}" ng-bind="author.props.name"/> <span ng-bind="I18n.t('js.label_on')"/> <span ng-bind="workPackage.props.createdAt|date:'longDate'"/>.
     <span ng-bind="I18n.t('js.label_last_updated_on')"/>