Popover Testing

HTML

<link rel="stylesheet" href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="//rawgit.com/nohros/nsPopover/master/src/nsPopover.js"></script>
<link rel="stylesheet" href="https://rawgit.com/nohros/nsPopover/master/example/nsPopover.css">
<title>Popover Testing</title>
<script type="text/ng-template" id="close">
    <div class = "triangle"> </div>
    <div class="ns-popover-tooltip">
        <ul>
            <li ng-repeat="item in main.items">
            	
              <button class="btn btn-default" ng-click=''>{{item.name}}</button>
            </li>            
        </ul>
        <button ng-click="hidePopover()">Cerrar</button>
    </div>
</script>

<body ng-app="app">
    <div ng-controller="MainController as main" class="container"> 
        <span>Foo: {{main.foo}}</span>
        <div>
            <button class="btn btn-primary" 
            ns-popover="" 
            ns-popover-template="close" 
            ns-popover-trigger="click" 
            ns-popover-theme="ns-popover-tooltip-theme" 
            ns-popover-timeout="1000" 
            ns-popover-hide-on-inside-click="false" 
            ns-popover-hide-on-outside-click="true" 
            ns-popover-hide-on-button-click="true">Click Me</button>
        </div>
    </div>
</body>

CSS

.controls {
    padding-bottom: 10px;
}
input {
    margin: 10px;
}


button {
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 3px;
  border: solid 1px #0096d6;
  background: linear-gradient(#0096d6, #0081b8);
  color: #fff;
}

button:hover,
button:focus,
button:active {
  background: #0081b8;
  border: solid 1px #0081b8;
}



a {
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: underline;
  color: #0096d6;
}

.ns-popover-tooltip a {
  text-decoration: none;
}

JavaScript

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

app.controller('MainController', function ($q, $timeout) {
    this.foo = "foobar!";

    this.items = [{
        name: "Action"
    }, {
        name: "Another action"
    }, {
        name: "Something else here"
    }];

    $('#example').popover();
});