AngularJS 1.2.x with right click context menu

var app = angular.module('plunker', ['directive.contextMenu']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'Context menu - Right click demo';
  $scope.list = {};
  $scope.ShowContextMenu = function(){
    alert('hh');
    list.append('clicked');
  }
  $scope.users = [
    {
      name:'bhavin patel',
      organization: 'caps'
    },
    {
      name:'arpita patel',
      organization: 'openet'
    },
    {
      name:'john doe',
      organization: 'xyz'
    },
    {
      name:'jane doe',
      organization: 'abc'
    }
    ];
  
});

// Rightclick directive
app.directive('ngRightClick', function($parse) {
    return function(scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function(event) {
            scope.$apply(function() {
                event.preventDefault();
                fn(scope, {$event:event});
            });
        });
    };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="context.js"></script>
  </head>

  <body ng-controller="MainCtrl" class='jumbotron'>
    <p>Hello {{name}}!</p>
    
    <ul class="list-group" >
      <li class="list-group-item"
          ng-repeat = "user in users"
          ng-right-click="ShowContextMenu()"
          context="context1">
        <samp class="text-primary">{{user.name | uppercase}}</samp>
        <samp class='badge badge-primary'>{{user.organization| uppercase}}</samp>
      </li>
    </ul>
    <ul id="context1" class="dropdown-menu" role='menu'> 
      <li><a ng-click="edit()">Edit</a></li>
      <li><a ng-click="link()">Link</a></li>
      <li><a ng-click="delete()">Delete</a></li>
      <li class="divider"></li>
      <li><a ng-click="properties()">Properties</a></li>
    </ul>
    <pre>
      {{list}}
    </pre>
  </body>

</html>

/* Put your css in here */

(function(angular) {
  var ngContextMenu = angular.module('directive.contextMenu', []);

  ngContextMenu.directive('cellHighlight', function() {
    return {
      restrict: 'C',
      link: function postLink(scope, iElement, iAttrs) {
        iElement.find('td')
          .mouseover(function() {
            $(this).parent('tr').css('opacity', '0.7');
          }).mouseout(function() {
            $(this).parent('tr').css('opacity', '1.0');
          });
      }
    };
  });
  
  ngContextMenu.directive('context', [

    function() {
      return {
        restrict: 'A',
        scope: '@&',
        compile: function compile(tElement, tAttrs, transclude) {
          return {
            post: function postLink(scope, iElement, iAttrs, controller) {
              var ul = $('#' + iAttrs.context),
                last = null;

              ul.css({
                'display': 'none'
              });
              $(iElement).bind('contextmenu', function(event) {
                event.preventDefault();
                 ul.css({
                  position: "fixed",
                  display: "block",
                  left: event.clientX + 'px',
                  top: event.clientY + 'px'
                });
                last = event.timeStamp;
              });
              //$(iElement).click(function(event) {
              //  ul.css({
              //    position: "fixed",
              //    display: "block",
              //    left: event.clientX + 'px',
              //    top: event.clientY + 'px'
              //  });
              //  last = event.timeStamp;
              //});

              $(document).click(function(event) {
                var target = $(event.target);
                if (!target.is(".popover") && !target.parents().is(".popover")) {
                  if (last === event.timeStamp)
                    return;
                  ul.css({
                    'display': 'none'
                  });
                }
              });
            }
          };
        }
      };
    }
  ]);
})(window.angular);