title: Show and Hide ContextMenu with Angularjs
body: <p>As shown in the HTML below, there is a contextmenu with <code>id=contextmenu-node.</code>
  Since the model <code>isVisible</code> is not define before, the context menu is invisible. 
  At my directive <code>ng-contextmenu</code>, I watch the right click to the text 
  <code>Right Click On the Item!</code> and when right clicked, I update isVisible to <code>true</code> and I expect the <code>contextmenu-node</code> to be visible. However, it never shows up.</p>
  
  <p>What shall be the problem?</p>
  
  <p>Here is the <a href="http://jsfiddle.net/yaprak/5Lk2V/2/" rel="nofollow">JSFiddle</a> of my question.</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
      &lt;ul id="contextmenu-node" ng-show="isVisible"&gt;
          &lt;li&gt; Item 1 &lt;/li&gt;
          &lt;li&gt; Item 2 &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div ng-contextmenu&gt; Right Click On the Item! &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module("myApp",[]);
  
  myApp.controller( "MainCtrl", [ "$scope", function($scope) {
      console.log("Main Controller loaded.");
  }]);
  
  myApp.directive( "ngContextmenu", function(){
      contextMenu = {};
      contextMenu.restrict = "AE";
      contextMenu.scope = {"isVisible": "="};
      contextMenu.link = function( lScope, lElem, lAttr ){
          lElem.on("contextmenu", function (e) {
              e.preventDefault();
              console.log("Element right clicked.");
              lScope.isVisible = true;
          });
          lElem.on("mouseleave", function(e){
              console.log("Leaved the div");
              lScope.isVisible = false;
          });
      };
      return contextMenu;
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#contextmenu-node{
      position: absolute;
  }
  </code></pre>