Angular with Bootstrap popovers. How to apply bindings in generated popover's body?

Question

I want to use bootstrap popovers as dialogs.

    <a popover href="#" 
        data-toggle="popover" title="" 
        data-html="true" 
        data-content=
           "<p>Are you sure? {{contact.FirstName}} will be removed!</p>
            <button class='btn'>Yes</button>
            <button ng-click='cancel()' class='btn'>Cancel</button>" 
        data-original-title="Remove Contact">Remove</a>

JS:

var ang = angular.module("ang", []);

ang.controller("angCtrl", function($scope) {
    $scope.contact = {
            Id: 1,
            FirstName: "John",
            LastName: "Doe"
        };

    $scope.cancel = function() {
        console.log('Cancel called');
    };
});

ang.directive("popover", function() {
    return {
        restrict: "A",
        link: function (scope) {
            scope.$watch("contacts", function () {
                $("a[data-toggle=popover]")
                .popover()
                .click(function (e) {
                    e.preventDefault();
                });
            });
        }
    };
});

The problem is bootarap generates popover html after angular has applied its bindings. How can I include a new generated popover?

Thanks in advance!

Solution

http://mgcrea.github.io/angular-strap/#/popover Popover directives/popover.js

Fetches an external html partial (or an inline ng-template) and populates the popover with its content.

Comments

[Ahmad Alfy]

I ran into similar issues when I tried to use AngularJS and Bootstrap. I found no solution but to use Angular directives for Twitter Bootstrap angular-ui.github.io/bootstrap .

[Ievgen Martynov]

Thanks, that is quite interesting!

[danza]

i cannot find any documentation saying that angular-ui supports this, while angular-strap does it, albeit less known as a project

[Paul]

angular-ui does not support adding html to the popups at this moment. They are developing this feature now and it is has not been released yet.

[SamHuckaby]

For those hitting this from Google, html templates are now supported in the latest iteration of UI Bootstrap (Angular directives for Twitter's Bootstrap).