如何找出为什么ng-click（）不第二次触发

Question

I have some code, which works on the jsfidle, and does not work locally. Inside this code I have the directive which compiles template and appends to DOM. Inside this template I bind some ng-click event (close popover). This event fired once, and when open popover on the second time and trying to close it, it does not work. Here the code:

mymodal.directive('editable', function ($compile) {
    return {
        restrict: 'EAC',
        template: "<a href='#' id='pop-over-link'>Show pop-over</a>",
        scope: {test: '&'},
        link: function(scope, element, attrs) {
            scope.closePopover = function($event){
              var el = $event.target;
                     $($event.target).parents('div.popover').popover('hide');
          };
          var templateData = 
            "<button class='btn btn-default btn-sm cancel' ng-click='closePopover($event)'>Cancel</button>";

          var compliedData = $compile(templateData)(scope);

          $(element)
            .popover({html: true,
                      content: compliedData
                     })
            .on('click', function(e) {
              e.preventDefault();
              return true;
            });                                    
        }
    }

Here the jsFiddle: http://jsfiddle.net/vc4sd1fe/ How I can debug this situation? Where could be the problem? I am confused why this code perfectly works only once. How can I found wehere to fix it?

Answer 1

I have made a same environment on local. But didn't get any issues. Anyway check this fiddle for more details or I can send you the html file that I created to test the same code. It works just fine. Th popup is closing on every click.

http://jsfiddle.net/Satbir/cswcopgr/

Just deleted some line of code:

 scope:false,

and directive:

<editable></editable>

Please check the same and report me. It would be great to help you.