title: Create Hoverable popover using angular-ui-bootstrap
body: <p>I have the following code for creating a popover in my template file:</p>
  
  <pre><code>&lt;span class="icon-globe visibility" 
        id="visibilityFor{{post.metaData.assetId}}" 
        popover="{{post.visibilityListStr}}" 
        popover-placement="right" 
        popover-trigger="mouseenter" 
        popover-popup-delay="50" 
        visibility&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I have a few clickable links on the popover. But the problem is I'm not able to hover on the popover created. I referred to the link <a href="http://jsfiddle.net/xZxkq/" rel="noreferrer">http://jsfiddle.net/xZxkq/</a>
  and tried to create a directive viz. 'visibility' for this purpose.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>myAppModule.directive("visibility", function ($timeout,$rootScope) {
    return {
  
      controller: function ($scope, $element) {
          $scope.attachEvents = function (element) {
              $('.popover').on('mouseenter', function () {
                  $rootScope.insidePopover = true;
              });
              $('.popover').on('mouseleave', function () {
                  $rootScope.insidePopover = false;
                  $(element).popover('hide');
              });
          }
      },
      link: function (scope, element, attrs) {
          $rootScope.insidePopover = false;
  
          element.bind('mouseenter', function (e) {
              $timeout(function () {
                  if (!$rootScope.insidePopover) {
                      element.popover('show');
                      attachEvents(element);
                  }
              }, 200);
          });
  
          element.bind('mouseout', function (e) {
              $timeout(function () {
                  if (!$rootScope.insidePopover) {
                      element.popover('show');
                      attachEvents(element);
                  }
              }, 200);
          });
  
      }
    }
  });
  </code></pre>
  
  <p>But I get an exception for 'element.popover' since it is undefined. Please point as to what I'm doing wrong and how can I show/hide the angular ui popover from the directive. I am using angular ui bootstrap JS file.</p>