ng-click not working in bootstrap popover content

Question

I want to show a clickable table in my popover, and call a function when one of the rows get clicked. My html looks like this:

<a popover  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-left"
    data-toggle="popover"
    data-placement="right"
    data-html="true"
    title="Popover title"
    data-content=
    '<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days" ng-click="show(111)">
           <td ng-bind="d"></td>
           <td ng-bind="x"></td>
         </tr>
       </tbody>
     </table>'>
      <i class="fa fa-clock-o fa-lg">Click me</i>
 </a>

And my script.js: var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.days = [
  'Sunday',
  'Monday',
  ];
  $scope.show = function(x) {
    console.log("show called with " + x);
    $scope.x = x;
  }
}).directive('popover', function($compile, $timeout){
  return {
    restrict: 'A',
    link:function(scope, el, attrs){
      var content = attrs.content;
      var elm = angular.element('<div />');
      elm.append(attrs.content);
      $compile(elm)(scope);
      $timeout(function() {
        el.removeAttr('popover').attr('data-content',elm.html());
        el.popover();
       });
    }
  }
});

Demo here

The code was copied from this question, the answer itself works fine, but my show function is not called. Any idea why?

@AlexandreMartin, what does that mean? how else should I ask this question? — swang, Aug 19 '16 at 18:46
@PankajParkar, no I'd like to use just bootstrap, which should be able to do this. — swang, Aug 19 '16 at 18:49

score 1 · Accepted Answer · answered Aug 19 '16 at 21:38

I've found the problem, for some reason the directive failed to bind function show with scope, but succeeded with days, I have experimented with a few things, if I change the way the link function is written, ng-click will work, but not ng-repeat, which means it had failed to bind days in that case.

The updated DEMO uses templateUrl instead of the data-content attribute

<script type="text/ng-template" id="popover-content">
     <table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days" role="button" ng-click="show(111)">
           <td ng-bind="d"></td>
           <td ng-bind="x"></td>
         </tr>
       </tbody>
     </table>
    </script>

now both ng-repeat and ng-click work fine for me.

ng-click not working in bootstrap popover content

1 Answers1