popover-trigger angular bootstrap not triggering popover

Question

I am trying to use uib-popover in angular as below

html template

          <form id="methodform" style="font-size:large;font-family:'merriweatherregular';color:#2c3e4c">
        <label><input type="radio" ng-model="methodname" value="method1">
          method1&nbsp;
          <i title="show info" class="fa fa-info-circle"
           aria-hidden="true" ng-click="getMethodInfo(1)"
          uib-popover-template="dynamicPopover.templateUrl" popover-placement="right"
          popover-title="{{dynamicPopover.title}}" popover-trigger="'click outsideClick'"></i></label></br>
        <label><input type="radio" ng-model="methodname" value="method2">
          method2&nbsp;
          <i title="show info" class="fa fa-info-circle"
           aria-hidden="true" ng-click="getMethodInfo(2)"
           uib-popover-template="dynamicPopover.templateUrl" popover-placement="right"
           popover-title="{{dynamicPopover.title}}"></i></label></br>
        <label><input type="radio" ng-model="methodname" value="method3">
          method3&nbsp;
          <i title="show info" class="fa fa-info-circle"
           aria-hidden="true" ng-click="getMethodInfo(3)"
           uib-popover-template="dynamicPopover.templateUrl" popover-placement="right"
           popover-title="{{dynamicPopover.title}}"></i></label></br>
      </form>

<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>{{dynamicPopover.content}}</div>
</script>

Controller:

   $scope.getMethodInfo = function(methodId){
     if(methodId==1){
       $scope.dynamicPopover.title = 'Method 1'       
     }else if(methodId==2){
       $scope.dynamicPopover.title = 'Method 2'
     }else{
       $scope.dynamicPopover.title = 'Method 3'
     }
   }

   $scope.dynamicPopover = {
    content: 'Some details about this method',
    templateUrl: 'myPopoverTemplate.html'
  };

I am having problem with closing of popover. When I use popover-trigger attribute the popover doesn't show up. But it works when I remove that attribute. I want to close the popover when user click anywhere on the page. I am not able to find the solution to this problem. Please help. Thanks in advance.

tony tony · Accepted Answer · 2017-03-23T09:37:19

You should remove click value from popup-trigger attribute.

Try just popover-trigger="'outsideClick'"

popover-trigger angular bootstrap not triggering popover

1 Answers