javascript - Changing AngularJS scope variable preventing directive from running? -

i'm trying create dynamic text-field in angularjs i've seen on many websites. when hover on field 'edit' button should appear , if click 'edit' button can both change value , 'edit' changes 'save' button. if click anywhere outside of text-field field discards changes , returns initial state.

looking @ markup below, 'click-anywhere-but-here' directive (provided stack overflow user question) doesn't seem executing whenever 'onclicked()' function called after 'ng-mouseup' event.

<div ng-mouseenter="onenter()" ng-mouseup="onclicked()" ng-mouseleave="onexit()">     <div class="row">     <div class="col-sm-9 block">         <span ng-transclude></span>     </div>     <div class="col-sm-3 block" click-anywhere-but-here="onclickelsewhere()">         <div ng-if="normal()"></div>         <div ng-if="focused()"><button class="btn btn-default">edit <span class="glyphicon glyphicon-pencil"></span></button></div>         <div ng-if="updating()"><button class="btn btn-default">update  <span class="glyphicon glyphicon-ok"></span></button></div>     </div>     </div>  </div> 

if @ actual onclicked function below, problem caused writing $scope.state variable (when assigned either value normal or updating):

angular.module('myapp') .directive('mutablewidget', [ function() {     return {         transclude: true,         templateurl: window.grailssupport.assetsroot + "app/components/mutable-widget/mutable-widget.html",         restrict: 'a',         scope: true,         link: function($scope, $element, $attribs) {             $scope.state = "normal";             ...             $scope.onclicked = function() {                 if($scope.state === "updating") {                     $scope.state = "normal";                 } else {                     $scope.state = "updating";                 }                 console.log("on click called state " + $scope.state);             };         }     }; }]); 

for example, if comment out statements in if/else, click-anywhere-but-here directive executes expected. code here:

angular.module('myapp') .directive('clickanywherebuthere', function($document, $parse) {     return {         restrict: 'a',         scope: {             callback : '&clickanywherebuthere'         },         link: function(scope, element, attr, ctrl) {             var handler = function(event) {                 if (!element[0].contains(event.target)) {                     console.log("doesn't contain target");                     scope.$apply(scope.callback(event));                  } else {                      console.log("does contain target");                  }             };              $document.on('click', handler);             scope.$on('$destroy', function() {                 $document.off('click', handler);             });         }     } }); 

can explain why 'click-anywhere-but-here' directive not executing , needs done produce desired behaviour? small advice on how actual debug these issues in language javascript hugely appreciated too. when encounter these problems, solving them amounts trial , error , outputting console.log messages in development tools console.

thanks in advance!