Angular right-click directive

Directive to bind action to right click

HTML

<script src="http://code.angularjs.org/1.1.3/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    Right click me: 
    <span class="action" 
          ng-click="increment()"
          ng-right-click="decrement($event)">{{value}}</span>    
</div>

CSS

.action {
    cursor: pointer;
    border: 1px solid black;
    padding: 5px;
}

JavaScript

var app = angular.module('myApp', []);
function MyCtrl($scope) {
    $scope.value = 50;
    $scope.increment = function() {
      $scope.value = $scope.value + 1;   
    };
    $scope.decrement = function(event) {
        console.log('x:', event.x, 'y:', event.y);
        $scope.value = $scope.value - 1; 
    };
};

app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});