Context Manu AngularJS Directive

http://angularjs.org/

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div ng-controller="MainCtrl">
    <div>Right Click on the rectangle below: </div>
    <div id="svg-canvas">
        <ul id="my-context-menu">
            <li ng-click="callback1()">Item 1</li>
            <li ng-click="callback2()">Item 2</li>
        </ul>
     <div>
</div>

CSS

#my-context-menu {
    position: absolute;
    display: none;
}

JavaScript

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

myApp.controller("MainCtrl", ["$scope","$compile", function ($scope,$compile) {
    console.log("Main Controller loaded.");
    $scope.callback1 = function(){
        console.log("Callback1");
    }
    $scope.callback2 = function(){
        console.log("Callback2");
    }
    
    var svg = d3.select("#svg-canvas").append("svg")
    .attr("width", 100)
    .attr("height", 100)
    .style("pointer-events", "all")
    .append('g');
    
    svg.append('rect')
    .attr("x", 35)
    .attr("y", 15)
    .attr("width", 20)
    .attr("height", 20)
    .attr("ng-context-menu", "")
    .style("fill", "gray");
    
    $compile(angular.element('#svg-canvas'))($scope);
}]);

myApp.directive("ngContextMenu", function () {
    contextMenu = {};
    contextMenu.restrict = "AE";
    contextMenu.link = function (lScope, lElem, lAttr) {
        console.log(lScope);
        console.log(lElem);
        console.log(lAttr);
        lElem.on("contextmenu", function (e) {
            e.preventDefault();
            console.log("Element right clicked.");
            $("#my-context-menu").css("left", e.clientX);
            $("#my-context-menu").css("top", e.clientY);
            $("#my-context-menu").css("display", "block");
        });
        lElem.on("mouseleave", function (e) {
            console.log("Leaved the div");
            $("#my-context-menu").css("display", "none");
        });
    };
    return contextMenu;
});