Popover bottom-right incorrect placement

Question

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?

.directive('notificationsPopover', function(){
  return{
    restrict: 'A',
    replace: true,
    scope: {
      ngModel: '='
    },
    template: '<i class="fa fa-bell-o" uib-popover-template="\'app/notifications/notifications.html\'" popover-placement="bottom-right" popover-trigger="outsideClick" popover-animation="false"></i>',
    link: function(scope, element, attr) {

    }
  };
})

// index.html

<i notifications-popover></i>

// notifications.html

<div>
<p style="color:#000;">I am incorrectly positioned bottom right</p>
</div>

// index.html

<i class="fa fa-bell-o" uib-popover="I am correctly positioned bottom right" popover-placement="bottom-right"></i>