title: Popover bottom-right incorrect placement
body: <p>When using the uib-popover-template attribute the positioning for 'bottom-right' is incorrect. How do I correctly position the popover content to 'bottom-right' using a template?</p>
  
  <pre><code>.directive('notificationsPopover', function(){
    return{
      restrict: 'A',
      replace: true,
      scope: {
        ngModel: '='
      },
      template: '&lt;i class="fa fa-bell-o" uib-popover-template="\'app/notifications/notifications.html\'" popover-placement="bottom-right" popover-trigger="outsideClick" popover-animation="false"&gt;&lt;/i&gt;',
      link: function(scope, element, attr) {
  
      }
    };
  })
  </code></pre>
  
  <p>// index.html</p>
  
  <pre><code>&lt;i notifications-popover&gt;&lt;/i&gt;
  </code></pre>
  
  <p>// notifications.html</p>
  
  <pre><code>&lt;div&gt;
  &lt;p style="color:#000;"&gt;I am incorrectly positioned bottom right&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/XvO5f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XvO5f.png" alt="enter image description here"></a></p>
  
  <p>// index.html</p>
  
  <pre><code>&lt;i class="fa fa-bell-o" uib-popover="I am correctly positioned bottom right" popover-placement="bottom-right"&gt;&lt;/i&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tG8Xr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tG8Xr.png" alt="enter image description here"></a></p>