JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div ng-app="app" id="ng-app">
    <p>Please click the li to see popover.</p>
    <ul ng-controller="Main">
        <li data-toggle="popover" title="Static Popover Title" data-content="Popover Content" init-popover>This should be a value from scope.</li>
        <li data-toggle="popover" ng-attr-title="Popover Title" data-content="Popover Content" init-popover>Test of ng-attr-title</li>
        <li ng-repeat="i in items" data-toggle="popover" title="{{ i.title }}" data-content="Popover Content" init-popover>{{ i.data }}</li>
    </ul>
</div>

CSS

ul {
    width:250px;
}

JavaScript

var app = angular.module('app', []);

app.controller('Main', ['$scope', function ($scope) {
    $scope.items = [{
        title: 'Title 2',
        data: 'Test in ngRepeat'
    }, ];
}]);

app.directive('initPopover', function ($timeout) {
    return function (scope, element, attrs) {
        if (scope.$last) {
                $timeout(function(){
                    angular.element('[data-toggle="popover"]').popover({
                    container: 'ul'
                });
            })
            
        }
    };
});