title: How to show angular bootstrap popover on custom event?
body: <p>I want to display bootstrap popover on custom event (after loading data from server). I don't understand why this code don't work. <a href="https://jsfiddle.net/indvd00m/dgjsdan6/" rel="nofollow">JSFiddle</a></p>
  
  <p>And second question, how to trigger events if I set <code>replace = true</code>? Because of IE8 doesn't support custom tags and throws exception.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="tcApp"&gt;
      &lt;manual&gt;&lt;/manual&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var tcApp = angular.module('tcApp', [ 'ui.bootstrap' ]);
  
  tcApp.config(function ($tooltipProvider) {
      $tooltipProvider.setTriggers({
          'openAfterLoad': 'closeOnClick'
      });
  });
  
  tcApp.directive('manual', [ '$timeout', '$interval', function($timeout, $interval) {
      return {
          restrict: 'E',
          scope: {},
          template: 
      '&lt;a ' + 
  '   href="#" ' + 
  '   ng-if="isManualVisible" ' + 
  '   popover-append-to-body="true" ' + 
  '   popover-placement="bottom" ' + 
  '   popover-trigger="openAfterLoad" ' + 
  '   popover-title="{{title}}" ' + 
  '   popover="{{content}}" ' + 
  '   tooltip="{{title}}" ' + 
  '   &gt;' + 
  '   &lt;span class="{{textClass}}"&gt;' + 
  '       &lt;span ng-show="!loading" class="glyphicon glyphicon-question-sign"&gt;&lt;/span&gt;' + 
  '       &lt;span ng-show="loading" class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt;' + 
  '   &lt;/span&gt;' + 
  '&lt;/a&gt;',
          replace: false, // true for IE8 only
          link: function (scope, element, attr) {
  
              scope.isManualVisible = true;
              scope.title = 'First title value';
              scope.content = 'First content value';
              scope.textClass = 'text-info';
  
              scope.opened = false;
              scope.loading = false;
              scope.loaded = false;
              scope.loadedTitle = false;
              scope.loadedContent = false;
              scope.checkLoadState = function () {
                  if (scope.loadedTitle &amp;&amp; scope.loadedContent) {
                      scope.loaded = true;
                      if (scope.loading)
                          scope.loading = false;
                      element.triggerHandler('openAfterLoad');
                  }
              };
              scope.$watch('loadedTitle', scope.checkLoadState);
              scope.$watch('loadedContent', scope.checkLoadState);
  
              element.on('openAfterLoad', function(event) {
                  console.log('openAfterLoad');
                  scope.opened = true;
              });
  
              element.on('closeOnClick', function(event) {
                  console.log('closeOnClick');
                  scope.opened = false;
              });
  
              element.on('click', function(event) {
                  console.log('click');
                  if (scope.loaded) {
                      if (scope.opened)
                          element.triggerHandler('closeOnClick');
                      else
                          element.triggerHandler('openAfterLoad');
                  } else {
                      scope.loadData();
                  }
              });
  
              scope.loadData = function() {
                  if (!scope.loaded &amp;&amp; !scope.loading) {
                      scope.loading = true;
  
                      $interval(function() {
                          scope.title = 'New title value';
                          scope.loadedTitle = true;
                      }, 5000, 1);
  
                      $interval(function() {
                          scope.content = 'New content value';
                          scope.loadedContent = true;
                      }, 5000, 1);
                  }
              };
          }
      };
  }]);
  </code></pre>