Context Manu AngularJS Directive

http://angularjs.org/

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<div ng-controller="MainCtrl">
    <ul id="contextmenu-node" ng-show="isVisible">
        <li> Item 1 </li>
        <li> Item 2 </li>
    </ul>
    <div ng-contextmenu  visible="isVisible"> Right Click On the Item! </div>
  
</div>

CSS

#contextmenu-node{
    position: absolute;
    top: 20px;
    left:50px;
}

JavaScript

var myApp = angular.module("myApp",[]);

myApp.controller( "MainCtrl", [ "$scope", function($scope) {
    console.log("Main Controller loaded.");
    $scope.isVisible = false;
  
    $scope.$watch('isVisible', function(){
        console.log('change');
    })
}]);

myApp.directive( "ngContextmenu", function(){
    contextMenu = {replace: false};
    contextMenu.restrict = "AE";
    
    contextMenu.scope = {"visible": "="};
    contextMenu.link = function( $scope, lElem, lAttr ){
        lElem.on("contextmenu", function (e) {
                
                e.preventDefault();
            
                console.log("Element right clicked.");
                $scope.$apply(function () {
                     $scope.visible = true;
                })
            
                
      
        });
        lElem.on("mouseleave", function(e){
         
                console.log("Leaved the div");
                 console.log("Element right clicked.");
                $scope.$apply(function () {
                     $scope.visible = false;
                })
         
        });
    };
    return contextMenu;
});