JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<div ng-app="myApp">
    <test-directive></test-directive>
</div>

JavaScript

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


        var directives = angular.module('directives', []);
        directives.directive('testDirective', function() {
            return {
                restrict: 'EAC',
                template: "<a id='pop-over-link' style='position: fixed; top: 100px; left: 100px;'>Show pop-over</a>" +
                          "<div id='pop-over-content' style='display:none'><button class='btn btn-primary' ng-click='testFunction()'>Ok</button></div>",
                link: function(scope, elements, attrs) {
                    setTimeout(function (e) {

                        $("#pop-over-link").popover({
                            'placement': 'top',
                            'trigger': 'click',
                            'html': true,
                            'container': 'body',
                            'content': function() {
                                return $("#pop-over-content").html();
                            }
                        });
                    });

                    scope.testFunction = function() {
                        alert("it works");
                        console.log("maybe");
                    }

                }
            }
        });