Context menu design using angularjs

File : app.js

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

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

 Item 1 
 Item 2 

";
    
    $scope.clickedItem1 = function(){
        console.log("Clicked item 1.");
    };
    $scope.clickedItem2 = function(){
        console.log("Clicked item 2.");
    };
}]);

myApp.directive( "contextMenu", function($compile){
    contextMenu = {};
    contextMenu.restrict = "AE";
    contextMenu.link = function( lScope, lElem, lAttr ){
        lElem.on("contextmenu", function (e) {
            e.preventDefault(); // default context menu is disabled
            //  The customized context menu is defined in the main controller. To function the ng-click functions the, contextmenu HTML should be compiled.
            lElem.append( $compile( lScope[ lAttr.contextMenu ])(lScope) );
            // The location of the context menu is defined on the click position and the click position is catched by the right click event.
            $("#contextmenu-node").css("left", e.clientX);
            $("#contextmenu-node").css("top", e.clientY);            
        });
        lElem.on("mouseleave", function(e){
            console.log("Leaved the div");
            // on mouse leave, the context menu is removed.
            if($("#contextmenu-node") )
                $("#contextmenu-node").remove();
        });
    };
    return contextMenu;
});

File : index.html

Right Click On the Item!
    

File : style.html

#contextmenu-node{
    position: absolute;
    background-color: white;
    border: solid #CCCCCC 1px;
}

.contextmenu-item{
    margin: 0.5em;
    padding-left: 0.5em;
}

.contextmenu-item:hover{
    background-color: #CCCCCC;
    cursor: default;
}