Angularjs popover plugin not working correctly

Question

I'm novice to angularjs. I've a problem with Popover jquery plugin, I've created a directive for it and don't know why it's not working correctly

here is a plunker link

Answer 1

Your binding is read without evaluation against the current scope. You could do evaluation manually using scope.$eval.

Try reading the data as text and evaluate manually:

var api = scope.$eval($(this).attr('data-api'));

DEMO

Another solution using $timeout to schedule the function to the next phase to ensure that angular has finished its bindings => we don't need to use scope.$eval anymore:

app.directive('popover', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function(){
          element.popover({
          trigger: 'hover',
          html: true,
          content: function() {
            var api = angular.fromJson(attrs.api);

            return (
              '<ul><li>' + api[0] + ',' + api[1] + '</li><li>' + api[2] + ',' + api[3] + '</li>');
          }
        });
      });
    }
  };
});

DEMO