Angular UI Popover close button not working

Question

I created a popover for a checkbox click using angular directive. It works perfectly fine but the close button does work. Here is my example code.

myApp.directive('mypopover', function ($compile,$templateCache,$interpolate) {
var getTemplate = function (contentType,attrs) {
    var template = '';
    switch (contentType) {
        case 'comment':
            var template  = "<div class=''>";
                template += "<form><div class='form-group'>";
                template += "<input type='hidden' value='"+attrs.value+"' name='documentationId' id='documentationId' />";
                template += "<textarea style='width:250px;' class='form-control' name='doc_comment' id='doc_comment'>Selected for Re-Use in 2nd Trade Workflow.</textarea>";
                template += "</div>";
                template += "<div class='form-group'>";
                template += "<input type='button' value='Close' class='btn btn-primary btn-xs' ng-click=\"closePopover()\" />";
                template += "<input type='button' value='Comment' class='btn btn-primary btn-xs pull-right'  />";
                template += "</div></form><br>";
                template += "</div>";
            break;
    }
    return template;
}

return {
    restrict: "EA",
    link: function (scope, element, attrs) {            
        var popOverContent;
        var d = new Date();
        var mm = d.getMonth()+1;

        popOverContent = getTemplate("comment",attrs);

        var options = {
            content: popOverContent,
            placement: "right",
            html: true,
            date: scope.date,
            title:"Date: "+mm+"/"+d.getDate()+"/"+d.getFullYear()
        };
        $(element).popover(options);

        scope.closePopover = function() { //this block doesn't work
            alert("called"); //does not return alert
        }
    }
};
});

html part of this is

<div class="checkbox checkbox-primary">
    <input 
        type='checkbox'                                        
        ng-model='selectedDocIds' 
        mypopover
    />
 </div>

I tried binding ng-click='closePopover()' function to main controller of this html but it doesn't work. I don't get error but just happen anything.

Can someone help me to have this ng-click event happening ?

Thanks

Answer 1

Look at my attempt to answer your question. May be this script on plunker will help you.

customDirectives.directive('customPopover', function () {
return {
    restrict: 'A',
    template: '',
    link: function (scope, el, attrs) {
        scope.label = attrs.popoverLabel;
        $(el).popover({
            trigger: 'hover', // or click
            html: true,
            content: attrs.popoverHtml,
            placement: attrs.popoverPlacement
        });
    }
};

});

UPDATED 19-Aug-2015:

ANOTHER SOLUTION...

I discovered that button "Close" which runs function "$(element).popover('hide')" does not invoke series of actions which must be performed to hide bubble and toggle checkbox in right way. So I looked inside "bootstrap.js" and found out that "popover" makes all required actions over function "tooltip.toggle()". Furthermore, this function is called only one time on page start and sticked inside event handler to checkbox only. Hence, you can download "bootstrap.js" from site, make changes and enforce bootstrap to handle more elements then only one checkbox. But it is little bit weird way. So I offer to insert only one string to your current code and remove two strings.

Look at your file "app.js", line 47... Better, look at my plunker. This is full copy (forked copy) of your plunker but has three changed rows from line 47.

    scope.closePopover = function() {
      $(element).click();
      // $(element).popover("hide");
      // $(element).attr({checked:false});
    }

Explanation...

Function "$(element).click()" simulates clicking event. In this case bootsrap performs all needed actions to hide bubble and uncheck checkbox.