Javascript 在图标上动态添加UI引导弹出窗口？

所以我在Angular应用程序中动态添加图标，根据颜色指示不同的来源

这是在这个函数中：

function getDataSource(datasource) {

        switch (datasource) {

            case 'A1':
                return '<span><i class=\"fa fa-circle blue\"></i></span>';
            case 'A2':
                return '<span><i class=\"fa fa-circle green\"></i></span>';
            case 'A3':
                return '<span><i class=\"fa fa-circle yellow\"></i></span>';
            case 'A4':
                return '<span><i class=\"fa fa-circle red\"></i></span>';
        }
    }

我想做的是在那些显示一组相关链接的跨距或图标中有一个弹出框。我将ui.bootstrap模块作为这些数据源图标所在的特定模块的依赖项

当我尝试使用popover时，什么都没有显示

---

如何动态地将popover元素添加到我的应用程序中

函数getDataSourcedatasource{

    switch (datasource) {

        case 'A1':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle blue\"></i></span>';
        case 'A2':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle green\"></i></span>';
        case 'A3':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle yellow\"></i></span>';
        case 'A4':
            return '<span data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><i class=\"fa fa-circle red\"></i></span>';
    }
}

然后用JS激活它们

<script>
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover(); 
    });
</script>

---

这将激活页面上的所有data toggle=popovers。

它编译时的样子，我检查了元素，它只编译title属性，而不编译任何ui引导属性。