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">
    <div ng-contextmenu>Right Click On the Item!
        <ul id="contextmenu-node" ng-show="isVisible">
            <li ng-click="itemClicked(item1)">Item 1</li>
            <li ng-click="itemClicked(item1)">Item 2</li>
        </ul>
    </div>
</div>

CSS

#contextmenu-node {
    position: absolute;
}

#contextmenu-node :hover{
   cursor:pointer;
   background-color: grey
}

JavaScript

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

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

myApp.directive("ngContextmenu", function () {
    contextMenu = {};
    contextMenu.restrict = "AE";
    contextMenu.scope = {
        "isVisible": "="
    };
    contextMenu.link = function (lScope, lElem, lAttr) {

        lElem.on("click", function (e) {
            e.preventDefault();
            console.log("Element right clicked.");
            lScope.$apply(function () {
                lScope.$parent.isVisible = true;
            });
            
            lScope.itemClicked = function(item)
            {
              console.log("Item  clicked");
              if(item!=null && item=="item1"){
              console.log("Item 1 clicked");
             }
             else{
             console.log("item 2 clicked");
             }
        		}
        });
    };
    return contextMenu;
});