title: AngularStrap - Popover in a Popover
body: <p>I have a Angular Strap popover that contains form elements:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-success" bs-popover title="2nd popover" html="true" data-content="should become a form of some kind"&gt;
      &lt;span class='glyphicon glyphicon-plus'&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>I load that into the first popover </p>
  
  <pre><code>&lt;button type="button" "class="btn btn-default" bs-popover data-auto-close="1" data-html="true" data-content="{{popoverContent}}" data-animation="am-flip-x" title="1st popover"&gt;
      Button label
  &lt;/button&gt;
  </code></pre>
  
  <p>using:</p>
  
  <pre><code>(function() {
      "use strict";
      angular.module("app").controller("managerController", ["$scope", "imageHierarchyRepository", "$templateCache", "$compile", function ($scope, imageHierarchyRepository, $templateCache, $compile) {
          imageHierarchyRepository.query(function(data) {
              $scope.hierarchies = data;
          });
          $scope.popoverContent = $templateCache.get("popoverTemplate.html");
          };
      }]);
  })();
  </code></pre>
  
  <p>However the second popover doesn't show up, and I'm guessing that it has something to do with compiling the raw html string into the first popover. How do I correctly compile the contents of a popover in AngularJS?</p>