AngularUI popover template compiles only once , doesn't get triggered when I navigate to another page in my SPA

Question

I'm working on a SPA Project.

At the header I have a menu template and under the menu I have ui-router routes.

I built a functionality with popover of Angular Bootstrap . And I am using built-in AngularJS Service $compile for inline template.

What I want is : Whenever I hover on the icon, it should show a submenu in my popover .

What I get : It shows the popover but If I navigate to somewhere else, It doesn't show again, I have to do a hard-refresh

I am adding the relevant part of my code here ;

In my view (When I hover on this icon, it shows the 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>

and part of my controller ;

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)      
});

What am I missing? Why it doesn't get triggered after I go to another route ?