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" ng-attr-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() {
  return function(scope, element, attrs) {
    if (scope.$last){
      $('[data-toggle="popover"]').popover({container: 'ul'});
    }
  };
});