AngularUI popover模板只编译一次，当我导航到SPA中的另一个页面时不会触发

Question

我正在开发SPA项目。

在标题处我有一个菜单模板，在菜单下我有ui-router个路线。

我使用popover Angular Bootstrap构建了一个功能。我使用内置的AngularJS服务$compile作为内联模板。

我想要的是：每当我将鼠标悬停在图标上时，它都会在我的popover中显示一个子菜单。

我得到的东西：它显示了弹出窗口，但如果我导航到其他地方，它不再显示，我必须做一个硬刷新

我在这里添加了代码的相关部分;

在我看来（当我将鼠标悬停在此图标上时，会显示弹出窗口）：

<i data-ng-if="item.route == 'profil'" class="fa fa-user fa-lg"   aria-hidden="true" style="line-height:inherit;"
               data-ng-mouseover="hoverProfilMenu(item)"
               data-ng-mouseleave = "mouseLeftMenu(item)"
               data-container ="container"
               data-el="popoverX"
               id = "mainMenuID">

 </i>

和我的控制器的一部分;

var a = $("[data-el=popoverX]");

a.popover({              
    html: true,
    trigger: 'hover',
    placement: "bottom",
    delay: {
        "show": 100,
        "hide": 250
    },
    container: '#mainMenuID',
    template: $compile(
                        '<div class=" popoverClassMainMenu popover mw-inverse popover-wide" role="tooltip" style="padding-right:30px; margin-left: -61px;"> <div class="arrow" style="margin-left: 47px;"></div>'+
                        '    <div data-ng-repeat="item in profilMenu" data-el="{{name}}" class="" data-ng-class="{\'pull-left\':!small}">\n'+
                        '        <div class="row accordion-header" >\n'+
                        '            <div class="mw-font-navbar" data-ng-class="{\'col-xs-10\':small, \'mw-clickable\':small}">{{name | translate}}\n'+
                        '                <a ui-sref="{{item.route}}"> <span>{{item.name}}</span></a> <br>\n'+
                        '            </div>\n'+
                        '        </div>\n'+
                        '        <div class="mw-divider mw-border-gray" style="margin-left:15px;margin-right:15px"></div>\n'+
                        '    </div>\n'+     
                        '</div>\n'
            )($scope)      
});

我错过了什么？为什么在我去另一条路线后没有被触发？