title: How to Open and Close Angular-UI popovers programmatically
body: <p>I need to create popovers that gets its content from the server. </p>
  
  <p>So I created the following directive:</p>
  
  <pre><code>.directive('myPopover', [myService, function ($myService) {
          return {
              restrict: 'E',
              transclude: true,
              template: '&lt;a href="" ng-click="wordClicked()" class="highlight" popover-trigger="manual" popover="Adequately good for the circumstances" popover-title="good enough " popover-placement="bottom" ng-transclude&gt;&lt;/a&gt;',
              link: function (scope, element, attrs) {
                  scope.wordClicked = function () {
                      if ( POPUP IS NOT SHOWING ){
                          var message = myService.getMessage({key: element.text()},
                              function () {
                                      console.info("NEED TO SHOW POPOVER WITH "+ message);
                                  });
                      }
                      else {
                          console.info("NEED TO CLOSE POPOVER");
                      }
                  }
              }
          }
      }]);
  </code></pre>
  
  <p>And inside getMessage success method I need to make the popover to show. 
  The <a href="http://angular-ui.github.io/">documentation</a> does not give any indication for that though I found comment made
  By Luthur <a href="https://github.com/angular-ui/bootstrap/issues/590">here</a> it seems like there is a <code>popover-trigger="manual"</code> option. 
  Could not find a way to trigger it programmatically</p>
  
  <p><strong>Update:</strong>
  I tried to follow <em>Mosho</em> advice but I am having troubles creating a popover with the custom event trigger.</p>
  
  <p>see <a href="http://plnkr.co/edit/NZm3gAGSJewLJyRTaee5?p=preview">plnkr</a></p>
  
  <p>Thanks!</p>