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-app="myApp" ng-controller="MainCtrl">
    <ul id="contextmenu-node" ng-show="isVisible">
        <li> Item 1 </li>
        <li> Item 2 </li>
    </ul>
    <div ng-contextmenu> Right Click On the Item! </div>
</div>

CSS

#contextmenu-node{
    position: absolute;
}

JavaScript

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

myApp.controller( "MainCtrl", [ "$scope", function($scope) {
    console.log("Main Controller loaded.");
}]);

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