title: AngularJS bootstrap popover with another directive Object [object Object] has no method 'popover'
body: <p>I have a button that I would like to trigger a bootstrap popover. That works fine except that I need that popover to have another directive in it (basically popover contains a list of items).</p>
  
  <p>I have found this article <a href="http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service" rel="noreferrer">http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service</a> but following it doesn't seem to work for me very well.</p>
  
  <p>I made a custom directive </p>
  
  <pre><code>.directive('popoverhtml', function ($compile) {
      return {
          restrict: 'A',
          transclude: true,
          template: "&lt;span ng-transclude&gt;&lt;/span&gt;",
          scope: {
  
          },
          link: function (scope, element, attrs) {
              console.log($(element));
              var options = {
                  content: "&lt;br&gt;&lt;br&gt;Hey",
                  placement: "right",
                  html: true,
                  title: "HEY",
                  trigger: "click"
              };
              $(element).popover(options);
          }
      }
  </code></pre>
  
  <p>and the following is my HTML mark up</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary btn-small" popoverHTML&gt;&lt;i class="icon-white icon-plus"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>For now I am not passing any custom html to it (if anybody knows how to do that I'd appreciate some guidance on this as well) I am just trying to get the popover appear with the html hardcoded in <code>content</code> param of the options object.</p>
  
  <p>However I am getting the following error as soon as the view with the button loads (before I click on the button)</p>
  
  <p><code>TypeError: Object [object Object] has no method 'popover'</code></p>
  
  <p>According to my googlefu this can mean quite a lot of things and I would appreciate some insight on what that could mean in the context of Angular.</p>
  
  <p>Thank you!</p>
  
  <p>EDIT: List of my JS includes.</p>
  
  
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"&gt;&lt;/script&gt;
  &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;    
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.min.js"&gt;&lt;/script&gt;   
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.4/angular-strap.min.js"&gt;&lt;/script&gt;      
  &lt;script src="js/admin-angular.js"&gt;&lt;/script&gt;  &lt;-- My custom include
  &lt;script src="js/admin-jquery.js"&gt;&lt;/script&gt;   &lt;-- My custom include
  &lt;script src="js/jquery.watermark.min.js"&gt;&lt;/script&gt;    
  &lt;script src="js/jquery.base64.js"&gt;&lt;/script&gt;
  </code></pre>