Bootstrap popover position seems erratic

Question

I'm working on a template in Angular that features a repeatable element. Each element has a popover. When my template renders, everything looks normal, however the placement of my popovers seems to be erratic. The position of the first popover is correct, but subsequent popovers are anchored to the wrong location.

Here is my HTML:

<div class="dashboard-stat" ng-repeat="s in stats">
    <div class="number">
        {{s.number}}
    </div>
    <div class="text">
        {{s.text[0]}}
        <br />
        {{s.text[1]}}
    </div>
    <div class="tips">
        <div class="btn btn-xs btn-transparent with-border" data-toggle="{{s.name}}">
            <i class="fa fa-info-circle"></i> Tips
        </div>
    </div>
</div>

Then in my controller, once the page loads, I set the popovers like so:

function setToggles() {
    $scope.stats.forEach(function(stat) {
        $('[data-toggle="' + stat.name + '"]').popover({
            delay: {show: "0", hide: "1000000"},
            content: stat.tip,
            html: true,
            trigger: "hover",
            placement: "left"
        });
    });
};

Here is a screenshot that demonstrates the problem:

As you can see, the first tooltip is correctly anchored. Subsequent tooltips are anchored off to the side though. I can't seem to figure out what the cause is. I've tried tweaking the .popover class within the scope of .tips (see CSS below) to fix the left property, but that didn't work as expected. When I apply left: -250px !important to .popover, all the tooltips are anchored correctly except for the first one. In other words, the problem is reversed.

Here is .tips CSS:

.tips {
    position: absolute;
    top: 0;
    right: -20px;
    display: flex;
    height: 100%;
    align-items: center;
    .btn {
        cursor: default;
    }
    .popover {
        left: -250px!important;
    }
}

Lastly, I've also tried passing the popover function a container argument, like so:

function setToggles() {
    $scope.stats.forEach(function(stat) {
        $('[data-toggle="' + stat.name + '"]').popover({
            delay: {show: "0", hide: "0"},
            content: stat.tip,
            html: true,
            container: '#tooltip-' + stat.name.replace(' ', '-'),
            trigger: "hover",
            placement: "left"
        });
    });
};

I've used the above trick before to solve this same problem, but it doesn't seem to be working this time. Also to note, I did add the appropriate ids to my element when I tried this.