Angular right-click directive

Directive to bind action to right click

HTML

<script src="http://code.angularjs.org/1.1.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div style="position: absolute;">
  <div class="hey there">hello</div>
  <div>
    container
    <div id="booyah">
      <span class="action one two three" 
            ng-click="increment($event)"
            ng-right-click="decrement(this)">{{value}}
            ng-model=""
      </span>    
      <div>
        sibling child
      </div>
    </div>
    <div>
      siblinging
    </div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br>hj
  <div class="hoverInfo"></div>
  <div class="compass"></div>
</div>

CSS

.action {
  cursor: pointer;
}

:hover {
  outline: solid 1px rgba(100,100,0,.1);
}
[data-inpl=mouseover] {
  outline: solid 1px red;
  cursor:pointer;
}

.hoverInfo {
  position: fixed;
  bottom: 0;
  width: 100%;
}
div { padding: 10px;}

/* { 
padding: 5px !important;
border: dotted 1px rgba(0,0,0,.05) !important;
margin: 5px !important;
}*/


.compass { display: none;
width: 50px;
height: 50px;
border-radius: 50%;
border: solid 1px blue;
background: rgba(255,255,255,.5);
position: absolute;
margin-left: -555px;
margin-top: -25px;
}

JavaScript

console.clear();
$(function(){
/*
var $hoverInfo =  $(".hoverInfo");
var s = " ";
	$("*").on("mouseover", function(e){
  	e.stopPropagation();
    var $e = $(this);
		$e.attr("data-inpl", "mouseover");
    
    var itemDesc = $e.prop("tagName").toLowerCase();
    var itemClasses = $e.attr("class");
      if(itemClasses){
      $.each($e.attr("class").split(" "), function(i,c){
      	console.log(i);
        itemDesc += "." + c;
      });
    }
    $hoverInfo.html(itemDesc);
    
	}).on("mouseout",  function(e){
  	e.stopPropagation();
		var $e = $(this);
		$e.removeAttr("data-inpl");
    
	});
  */
  
  
//hijack context menu
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
		e.preventDefault();
    console.log(e);
    console.log(e.x);
    console.log(e.y);
    $(".compass").css({
    	"left": e.x,
      "top": e.y,
      "display":"block"
    })
  }, false);
}

});