AngularStrap - Popover in a Popover

Question

I have a Angular Strap popover that contains form elements:

<button type="button" class="btn btn-success" bs-popover title="2nd popover" html="true" data-content="should become a form of some kind">
    <span class='glyphicon glyphicon-plus'></span>
</button>

I load that into the first popover

<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">
    Button label
</button>

using:

(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");
        };
    }]);
})();

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?

Answer 1

I'm not sure if this will answer your question, but here's an example of how to show a popover within a popover using templates:

<button type="button" class="btn btn-primary" bs-popover data-title="primary popover" html="true" data-template-url="popoverTemplate.html">Primary popover</button>

<script type="text/ng-template" id="popoverTemplate.html">
  <div class="popover" tabindex="-1">
    <div class="arrow"></div>
    <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
    <div class="popover-content">
      <button type="button" class="btn btn-default" bs-popover data-title="inner popover" html="true" data-template-url="popover2Template.html">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </div>
  </div>
</script>

<script type="text/ng-template" id="popover2Template.html">
  <div class="popover" tabindex="-1">
    <div class="arrow"></div>
    <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
    <form class="popover-content">
      <div class="form-group">
        <label>Name:</label>
        <input type="text" class="form-control"/>
      </div>
    </form>
  </div>
</script>