diff --git a/app/coffee/modules/tasks/detail.coffee b/app/coffee/modules/tasks/detail.coffee
index ea1f4dee..5598ccc5 100644
--- a/app/coffee/modules/tasks/detail.coffee
+++ b/app/coffee/modules/tasks/detail.coffee
@@ -293,17 +293,32 @@ module.directive("tgTaskStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "
 
 
 TaskIsIocaineButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
-    template = """
+    template = _.template("""
       <fieldset title="Feeling a bit overwhelmed by a task? Make sure others know about it by clicking on Iocaine when editing a task. It's possible to become immune to this (fictional) deadly poison by consuming small amounts over time just as it's possible to get better at what you do by occasionally taking on extra challenges!">
-        <label for="is-iocaine" class="button button-gray is-iocaine">Iocaine</label>
+        <label for="is-iocaine"
+              class="button button-gray is-iocaine <% if(isEditable){ %>editable<% }; %> <% if(isIocaine){ %>active<% }; %>">
+              Iocaine
+        </label>
         <input type="checkbox" id="is-iocaine" name="is-iocaine"/>
       </fieldset>
-    """
+    """)
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
             return $scope.project.my_permissions.indexOf("modify_task") != -1
 
+        render = (task) ->
+            if not isEditable() and not task.is_iocaine
+                $el.html("")
+                return
+
+            ctx = {
+                isIocaine: task.is_iocaine
+                isEditable: isEditable()
+            }
+            html = template(ctx)
+            $el.html(html)
+
         $el.on "click", ".is-iocaine", (event) ->
             return if not isEditable()
 
@@ -318,23 +333,15 @@ TaskIsIocaineButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
                 $rootscope.$broadcast("history:reload")
 
             promise.then null, ->
+                task.revert()
+                $model.$setViewValue(task)
                 $confirm.notify("error")
 
             promise.finally ->
                 $loading.finish($el.find('label'))
 
         $scope.$watch $attrs.ngModel, (task) ->
-            return if not task
-
-            if isEditable()
-                $el.find('.is-iocaine').addClass('editable')
-            else
-                $el.find('.is-iocaine').removeClass('editable')
-
-            if task.is_iocaine
-                $el.find('.is-iocaine').addClass('active')
-            else
-                $el.find('.is-iocaine').removeClass('active')
+            render(task) if task
 
         $scope.$on "$destroy", ->
             $el.off()
@@ -343,7 +350,6 @@ TaskIsIocaineButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
         link: link
         restrict: "EA"
         require: "ngModel"
-        template: template
     }
 
 module.directive("tgTaskIsIocaineButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", TaskIsIocaineButtonDirective])
diff --git a/app/coffee/modules/userstories/detail.coffee b/app/coffee/modules/userstories/detail.coffee
index 9bca5da5..050679b4 100644
--- a/app/coffee/modules/userstories/detail.coffee
+++ b/app/coffee/modules/userstories/detail.coffee
@@ -526,28 +526,29 @@ module.directive("tgUsStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$t
 #############################################################################
 
 UsTeamRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
-    template = """
-      <label for="team-requirement" class="button button-gray team-requirement">Team requirement</label>
-      <input type="checkbox" id="team-requirement" name="team-requirement"/>
-    """
+    template = _.template("""
+    <label for="team-requirement"
+           class="button button-gray team-requirement <% if(canEdit){ %>editable<% }; %> <% if(isRequired){ %>active<% }; %>">
+        Team requirement
+    </label>
+    <input type="checkbox" id="team-requirement" name="team-requirement"/>
+    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         canEdit = ->
             return $scope.project.my_permissions.indexOf("modify_us") != -1
 
-        $scope.$watch $attrs.ngModel, (us) ->
-            return if not us
+        render = (us) ->
+            if not canEdit() and not us.team_requirement
+                $el.html("")
+                return
 
-            if canEdit()
-                $el.find('label').addClass('editable')
-
-            if us.team_requirement
-                $el.find('.team-requirement').addClass('active')
-            else
-                $el.find('.team-requirement').removeClass('active')
-
-        $scope.$on "$destroy", ->
-            $el.off()
+            ctx = {
+                canEdit: canEdit()
+                isRequired: us.team_requirement
+            }
+            html = template(ctx)
+            $el.html(html)
 
         $el.on "click", ".team-requirement", (event) ->
             return if not canEdit()
@@ -567,11 +568,16 @@ UsTeamRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
                 us.revert()
                 $model.$setViewValue(us)
 
+        $scope.$watch $attrs.ngModel, (us) ->
+            render(us) if us
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
     return {
         link: link
         restrict: "EA"
         require: "ngModel"
-        template: template
     }
 
 module.directive("tgUsTeamRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", UsTeamRequirementButtonDirective])
@@ -581,28 +587,29 @@ module.directive("tgUsTeamRequirementButton", ["$rootScope", "$tgRepo", "$tgConf
 #############################################################################
 
 UsClientRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
-    template = """
-      <label for="client-requirement" class="button button-gray client-requirement">Client requirement</label>
-      <input type="checkbox" id="client-requirement" name="client-requirement"/>
-    """
+    template = _.template("""
+    <label for="client-requirement"
+           class="button button-gray client-requirement <% if(canEdit){ %>editable<% }; %> <% if(isRequired){ %>active<% }; %>">
+        Client requirement
+    </label>
+    <input type="checkbox" id="client-requirement" name="client-requirement"/>
+    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         canEdit = ->
             return $scope.project.my_permissions.indexOf("modify_us") != -1
 
-        $scope.$watch $attrs.ngModel, (us) ->
-            return if not us
+        render = (us) ->
+            if not canEdit() and not us.client_requirement
+                $el.html("")
+                return
 
-            if canEdit()
-                $el.find('label').addClass('editable')
-
-            if us?.client_requirement
-                $el.find('.client-requirement').addClass('active')
-            else
-                $el.find('.client-requirement').removeClass('active')
-
-        $scope.$on "$destroy", ->
-            $el.off()
+            ctx = {
+                canEdit: canEdit()
+                isRequired: us.client_requirement
+            }
+            html = template(ctx)
+            $el.html(html)
 
         $el.on "click", ".client-requirement", (event) ->
             return if not canEdit()
@@ -622,11 +629,16 @@ UsClientRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) -
                 us.revert()
                 $model.$setViewValue(us)
 
+        $scope.$watch $attrs.ngModel, (us) ->
+            render(us) if us
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
     return {
         link: link
         restrict: "EA"
         require: "ngModel"
-        template: template
     }
 
 module.directive("tgUsClientRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading",