Why Contend Show Multiple Time In Angular While Using Ajax Call?

I have two problem in my demo .I am making a pop over .I should open on icon click(here is used star icon).when i click star icon I am able to see pop up screen as I want but probl

Solution 1:

Well if you are still working on the problem, following is the solution. Though I am not sure if this is the best way to do it as I'm starting with AngularJS.

var getTemplate = function(contentType, scope, element) {

    var template = $templateCache.get("templateId.html");

    $.ajax({
        type: "GET",
        url: 'pop.html',
        dataType: 'html',
        success: function(data) {
          var options = {
            content: data,
            placement: "right",
            html: true,
            date: scope.date,
        };
    $(element).popover(options);

    //FIND ALL POPOVERS AND HIDE THEM EXCEPT CURRENT ONE//
    $(element).on("show.bs.popover",function(t,e){
      $("span[mypopover]").not(this).popover('hide');
    });

  },
  error: function(data) {
    alert(data);
  }
    });

    return template;
};

Following are the lines:

$(element).on("show.bs.popover",function(t,e){
    $("span[mypopover]").not(this).popover('hide');
});

Plunker:http://plnkr.co/edit/WM0K8sdPVHSNeuIlLBim