pragmatic-angular module example utilizing Bootstrap Modal and Popover

See https://github.com/lgersman/pragmatic-angular

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//cdn.rawgit.com/lgersman/pragmatic-angular/e6a1ce1de836ac935e3bfad4ae4290ca128a6db6/pragmatic-angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div ng-app="app">
    <div ng-controller="main" ng-on="{ 
            'shown.bs.modal' : onModalShown,
            'hidden.bs.modal' : onModalHidden
        }">
        <div class="alert alert-warning" role="alert" ng-show="closedBy">
            The Bootstrap modal was closed using the <strong>{{closedBy}}</strong> button.
        </div>    
        <p>
            Click "Open modal" (and press <kbd>F12</kbd> to open you javascript console !)
        </p>
        <p>
            <center>
                <button 
                    ng-jquery-plugin="{
                        popover : {
                            title    : 'Click button to open modal',
                            html     : true,
                            content  : 'This Bootstrap popover was attached by the &lt;code&gt;ng-jquery-plugin&lt;/code&gt; directive',
                            placement: 'bottom',
                            trigger  : 'hover'
                        }
                    }"
                    class="btn btn-primary" 
                    ng-click="openModal($event)"
                >
                    Open modal
                </button>
            </center>
        </p>
        <p>
            We're configured the Bootrap modal to not close automatically using <kbd>ESC</kbd> :
<pre>
ng-jquery-plugin="{
    modal : {
        keyboard: false,
        show    : false
    }
}" 
</pre>
            by providing this option to the <code>ng-jquery-plugin</code> directive.
 ...

CSS

ul { 
    font-family:verdana, sans;
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}

ul li { 
    margin: 0 3px 3px 3px; 
    padding: 0.4em; 
    padding-left: 1.5em; 
    height: 1.2em; 
    line-height: 1.2em;
}

ul li span { 
    position: absolute; 
    margin-left: -1.3em; 
}

JavaScript

angular.module('app', ['pragmatic-angular'])
.controller('main', function($scope) {
    $scope.openModal = function(event) {
        $(event.target).popover('hide');
        $('#mymodal').modal('show');
    };
    
    $scope.closedBy = '';
    
    $scope.onModalShown = function() {
        console.log( "modal is visible.");
    };
    
    $scope.onModalHidden = function() {
        console.log( "modal is hidden.");
    };
});