title: Accessing scope from within element.bind, within link function of directive
body: <p>I am experiencing some problems within the link function of my directive. I am starting a new timeout within mousedown event bound to the element, then clearing it on the mouseup. The timeout is not clearing and also other variables I call on the scope are not updating within the element.bind functions. When I log to console, both functions are being triggered but the $scope doesn't seem to update until after the timeout has completed?</p>
  
  <p>How can I make this work? JS fiddle here: <a href="http://jsfiddle.net/xrh6dhf9/" rel="nofollow">http://jsfiddle.net/xrh6dhf9/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app="dr" ng-controller="testCtrl"&gt;
  &lt;holddelete param="myDeletedMessage" update-fn="doCallback(msg)"&gt;&lt;/test&gt;    
  </code></pre>
  
  <p></p>
  
  <p>JavaScript</p>
  
  <pre><code>var app = angular.module('dr', []);
  app.controller("testCtrl", function($scope) {
      $scope.myDeletedMessage = "Deleted Succesfully";
      $scope.doCallback = function(msg) {        
          alert(msg);
      }
  });
  app.directive('holddelete', ['$timeout', function( $timeout) {
      return {
          restrict: 'E',
          scope: {
              param: '=',
              updateFn: '&amp;'
          },
          template: "&lt;a href&gt; &lt;i class='fa fa-times fa-fw'&gt;&lt;/i&gt;Delete  {{message}}&lt;/a&gt;",
          replace: true,        
          link: function($scope, element, attrs) {  
  
              $scope.mytimeout = null;
  
             $scope.message = "&gt;";
  
              element.bind('mousedown', function (e) {
                  console.log("mousedown");
                  $scope.message = "- Hold 2 Secs";
                  $scope.mytimeout = $timeout(function(){ 
                      $scope.updateFn({msg: $scope.param});
                  }, 2000)
              });
              element.bind('mouseup', function (e) {
                  console.log("mouseup");
                  $scope.mytimeout = null;
  
                  $scope.message = "&gt;";
              })
          }
      }
  }]);
  </code></pre>