ng-repeat не работает должным образом в bootstrap popover

Question

У меня есть простой загрузочный popover, который открывается, когда я нажимаю кнопку. Я хочу показать список имен в корпусе popover, используя какой-то цикл. У меня есть список имен в моем контроллере angularjs. Я использую ng-repeat в popover для создания списка. ng-repeat работает хорошо, если я использую его вне popover, но он, похоже, не работает корректно в корпусе popover.

Кажется, что он ведет себя так, как будто у меня есть 2-уровневый вложенный ng-repeat в моем коде, хотя я не имею вложенного ng-repeat в любом месте! Кроме того, popover не кажется «pop» из правильного местоположения (он должен выскочить из кнопки). Я делаю что-то неправильно? Заранее спасибо! Вот fiddle

Вот мой код, показывающий пирог:

$scope.showPopover = function() { 
     jQuery(function($) { 
       $('#pop').popover({ 
        html: true, 
        container: 'body', 
        title: '<b style="margin-top:5px">Some Title</b>&nbsp;&nbsp;&nbsp;'+ 
          '<button type="button" id="popoverCloseButton" class="close">&times;</button>', 
        content: function() { 
         return $compile($('#popover_content').html())($scope); 
        }, 
        placement: 'auto right' 
       }).popover('show'); 

       document.getElementById("popoverCloseButton").addEventListener("click", function(){ 
        $scope.destroyPopover(); 
       }); 
      }); 
     }; 

Answer 1

Я еще, чтобы выяснить, почему это происходит, так что имеет меня заинтриговала, но если вы встраиваете всплывающий шаблон и удаляете его из DOM, который он работает.

$scope.showPopover = function() { 
     jQuery(function($) { 
       $('#pop').popover({ 
        html: true, 
        container: 'body', 
        title: '<b style="margin-top:5px">Some Title</b>&nbsp;&nbsp;&nbsp;'+ 
          '<button type="button" id="popoverCloseButton" class="close">&times;</button>', 
        content: function() { 
         return $compile(`<div ng-repeat="x in students"> 
     <input type="checkbox"/>&nbsp;&nbsp;{{x.firstName}} {{x.lastName}} 
     </div>`)($scope); 
        }, 
        placement: 'auto right' 
       }).popover('show'); 

, а затем удалить этот код из HTML

<!-- Popover --> 
    <!--<div id="popover_content" style="display:none"> 

     <div ng-repeat="x in students"> 
     <input type="checkbox"/>&nbsp;&nbsp;{{x.firstName}} {{x.lastName}} 
     </div> 
    </div>--> 
    <!-- End Popover --> 

Постараюсь покопаться немного больше, чтобы выяснить, почему, но мне интересно, если установка содержания: к чему-то вы явно скомпилирован что на самом деле в DOM каким-то образом реплицирует вещи.

EDIT После некоторого копания кажется, что «display: none» может вызывать проблемы с вызовом jQuery .html, который может испортить компиляцию. Все еще не полностью убежден, но может привести вас к чему-то.