almeidaalex/index.html

## index.html
<!DOCTYPE html>
<html ng-app="pop" >
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="bower_components/angularjs/angular.js"></script>
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
	<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
	<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<title></title>
</head>
<body>
	<div ng-controller="popCtrl as p">

	    {{p.htmlTooltip}}
	    <br />
	    <button class="btn btn-primary"
	    		data-container="body"
	    		ng-click="p.popover($event)"
	    		title="Popover title"

	    		data-content="<strong>And</strong> here's some amazing content. {{p.htmlTooltip}}">
	    	<span>PopOver</span>
	    </button>

	    <br />
	    <button class="btn btn-primary"
	    		role="button"
	    		data-container="body"
	    		ng-click="p.popover($event)"
	    		data-trigger="focus"
	    		>
	    	<span>PopOver 2</span>
	    </button>
	</div>
</body>
<script type="text/ng-template" id="template.html">
	 <ul class="nav nav-pills nav-stacked nav-sm" role="menu">
	    <li><a href="#">Action</a></li>
	    <li><a href="#">Another action</a></li>
	    <li><a href="#">Something else here</a></li>
	    <li><a href="#" ng-click="p.itemClick()">{{p.htmlTooltip}}</a></li>
	  </ul>
</script>
<script type="text/javascript">
	angular.module('pop', ['ui.bootstrap'])
	.controller('popCtrl',['$scope','$compile', '$templateCache', function($scope, $compile, $templateCache){
		var self = this;

		self.htmlTooltip  = 'Click here buddy!';

		self.popover = function(e) {
			var contentTemplate = $compile($templateCache.get('template.html'))($scope);

			$(e.currentTarget).popover({placement: 'right', html: true, content: contentTemplate});
			$(e.currentTarget).popover('toggle');
		}

		self.itemClick = function(){
			alert('Wow, I was clicked, amazing!')
		}

	}]);


</script>
</html>
	<!DOCTYPE html>
	<html ng-app="pop" >
	<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="bower_components/angularjs/angular.js"></script>
	<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
	<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
	<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
	<title></title>
	</head>
	<body>
	<div ng-controller="popCtrl as p">

	{{p.htmlTooltip}}
	<br />
	<button class="btn btn-primary"
	data-container="body"
	ng-click="p.popover($event)"
	title="Popover title"

	data-content="<strong>And</strong> here's some amazing content. {{p.htmlTooltip}}">
	<span>PopOver</span>
	</button>

	<br />
	<button class="btn btn-primary"
	role="button"
	data-container="body"
	ng-click="p.popover($event)"
	data-trigger="focus"
	>
	<span>PopOver 2</span>
	</button>
	</div>
	</body>
	<script type="text/ng-template" id="template.html">
	<ul class="nav nav-pills nav-stacked nav-sm" role="menu">
	<li><a href="#">Action</a></li>
	<li><a href="#">Another action</a></li>
	<li><a href="#">Something else here</a></li>
	<li><a href="#" ng-click="p.itemClick()">{{p.htmlTooltip}}</a></li>
	</ul>
	</script>
	<script type="text/javascript">
	angular.module('pop', ['ui.bootstrap'])
	.controller('popCtrl',['$scope','$compile', '$templateCache', function($scope, $compile, $templateCache){
	var self = this;

	self.htmlTooltip = 'Click here buddy!';

	self.popover = function(e) {
	var contentTemplate = $compile($templateCache.get('template.html'))($scope);

	$(e.currentTarget).popover({placement: 'right', html: true, content: contentTemplate});
	$(e.currentTarget).popover('toggle');
	}

	self.itemClick = function(){
	alert('Wow, I was clicked, amazing!')
	}

	}]);


	</script>
	</html>