title: angular ui popover flicker incorrect position
body: <p>I've seen posts about this bug being fixed by either updating angular-bootstrap or adding the template to $templateCache but none of these fixes has worked for me. The problem is that when the popover is rendered the initial position is incorrect i.e, it's positioned at 0,0 instead of the element the directive is being applied to. So, the popover jumps from 0,0 to the correct position. The popover being displayed is inside another directive so I'm not sure if maybe that is an issue.</p>
  
  <p>// directives</p>
  
  <pre><code>(function(){
  'use strict';
  
  angular.module('myApp')
  .directive('campaignItem', function () {
    return {
      restrict: 'A',
      scope: {
        campaigns: '=',
        userRole: '@'
      },
      templateUrl: 'campaign.tpl.html',
      link: function(scope, element, attr) {
      }
    };
  })
  .directive('campaignChangesPopover', function() {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        ngModel: '='
      },
      template: '&lt;a uib-popover-template="\'campaign-popover.html\'" popover-placement="right"&gt;Popover&lt;/a&gt;',
      link: function(scope, element, attr) {     
      }
    };
  });
  
  });
  </code></pre>
  
  <p>// campaignItem template</p>
  
  <pre><code>...
  &lt;td colspan="3"&gt;
    &lt;strong&gt;Recent Changes&lt;/strong&gt;
    &lt;p&gt;&lt;a campaign-changes-popover&gt;view changes&lt;/a&gt;&lt;/p&gt;
  &lt;/td&gt;
  ...
  </code></pre>
  
  <p>// campaignChangesPopover template</p>
  
  <pre><code>&lt;strong&gt;Change Log&lt;/strong&gt;&lt;br /&gt;
  &lt;span&gt;Josh Fox Approved Policy 11/24/2015&lt;/span&gt;&lt;br /&gt;
  &lt;span&gt;Brian Adamski Changed Policy. 11/23/2015&lt;/span&gt;&lt;br /&gt;
  &lt;span&gt;Josh Fox Requested Change: Modify Policy. Date 11/20/2015&lt;/span&gt;&lt;br /&gt;
  &lt;span&gt;Brian Adamski Submitted Campaign for Approval 11/16/2015&lt;/span&gt;&lt;br /&gt;
  &lt;span&gt;Brian Adamskit Created Campaign 11/15/2015&lt;/span&gt;
  </code></pre>
  
  <p>// tried with $timeout</p>
  
  <pre><code>template: '&lt;a uib-popover-template="\'campaign-popover.html\'" popover-placement="right" popover-trigger="none" ng-click="showPopover()" popover-is-open="isOpen"&gt;Popover&lt;/a&gt;',
      link: function(scope, element, attr) {
        scope.isOpen = false;
        scope.showPopover = function() {
          $timeout(function() {
            scope.isOpen = !scope.isOpen;
          }, 400);
        };
      }
  </code></pre>