javascript - AngularJS bootstrap popover with another directive Object [object Object] has no method 'popover' -

i have button trigger bootstrap popover. works fine except need popover have directive in (basically popover contains list of items).

i have found article http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service following doesn't seem work me well.

i made custom directive

.directive('popoverhtml', function ($compile) {     return {         restrict: 'a',         transclude: true,         template: "<span ng-transclude></span>",         scope: {          },         link: function (scope, element, attrs) {             console.log($(element));             var options = {                 content: "<br><br>hey",                 placement: "right",                 html: true,                 title: "hey",                 trigger: "click"             };             $(element).popover(options);         }     } 

and following html mark up

<button type="button" class="btn btn-primary btn-small" popoverhtml><i class="icon-white icon-plus"></i></button> 

for not passing custom html (if knows how i'd appreciate guidance on well) trying popover appear html hardcoded in content param of options object.

however getting following error view button loads (before click on button)

typeerror: object [object object] has no method 'popover'

according googlefu can mean quite lot of things , appreciate insight on mean in context of angular.

thank you!

edit: list of js includes.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>     <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.min.js"></script>    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.4/angular-strap.min.js"></script>       <script src="js/admin-angular.js"></script>  <-- custom include <script src="js/admin-jquery.js"></script>   <-- custom include <script src="js/jquery.watermark.min.js"></script>     <script src="js/jquery.base64.js"></script> 

i recommend looking angularstrap popovers. generally, i'd recommend angularui, angularstrap supports template partials in popovers , angularui doesn't.

if go angularstrap, can write html partial displayed in popover , partial can include whatever directives normal angular partial.