How do I display a bootstrap popover in autocomplete options in angularjs?

Question

I am new to angularjs. I need to show a link on hover on autocomplete option, the 3 dots on left side as below

And when I hover on the link(3 dots) I need to show a popover which is an html template. I am not able to find a way to show the pop-over link. Btw I am trying it with massautocomplete. http://hakib.github.io/MassAutocomplete/

Below is how I Am creating the template -

  for (var i = 0; i < users.length; i++) {
 var user = users[i];
 if (user.name.toLowerCase().indexOf(q) !== -1 ||
     user.email.toLowerCase().indexOf(q) !== -1)
   results.push({
     value: user.name,
     // Pass the object as well. Can be any property name.
     obj: user,
     label: $sce.trustAsHtml(
       '<div class="row">' +
       ' <div class="col-xs-5">' +
       '  <i class="fa fa-user"></i>' +
       '  <strong>' + highlight(user.name,term) + '</strong>'+
       ' </div>' +
       ' <div class="col-xs-6 text-right text-muted">' +
       '  <small><a href="#">' + highlight(user.email,term) + '</a></small>' +
       ' </div>' +
         '<div  class="col-xs-1">' +
           '<a uib-popover-html="\'<b>test</b>\'" '+
            'popover-placement="right" popover-trigger="\'mouseenter\'">...</a>'+
       '</div>'+

       ' <div class="col-xs-12">' +
       '  <span class="text-muted">Joined</span>' +
          user.joined +
       ' </div>'
     )
   });

}

Any suggestion are welcome, I can use another autocomplete library as well if needed.

Thanks!

Answer 1

You would need to modify the way you return the results to use the "passing objects" method as documented in the MassAutocomplete examples and then bind your ... to show a Bootstrap popover Documented Here binding the content to a property on your object.

To angularise your bootstrap use AngularUI which has a specific popover implementation. Documented Here See UI.Bootstrap.Popover.