Angularjs bootstrap tabset tab heading

Question

I am wondering whether it is possible to write html inside an angularjs bootstrap tabset tab heading. I am trying to add a svg inside the title. I have created a quick snippet in plunker to try and demonstrate the issue I am having.

<tabset>   <tab heading="<span>hello</span><em>1</em>">One</tab>   <tab heading="Two">Two</tab>   <tab heading="Three">Three</tab> </tabset> 

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

any ideas?

thanks

Answer 1

Angular Bootstrap v0.14+

Angular Bootstrap v0.14 introduced new prefixes for most previously provided controls. The original answer below still applies, but you must use the new tag names uib-tabset, uib-tab, and uib-tab-heading.

<uib-tabset>   <uib-tab>     <uib-tab-heading>       <span>hello</span><em>1</em>     </uib-tab-heading>     One   </uib-tab>   <uib-tab heading="Two">Two</uib-tab>   <uib-tab heading="Three">Three</uib-tab> </uib-tabset> 

Angular Bootstrap < v0.14

You should be using the tab-heading element within the tab element if you want HTML within the heading (as shown in the example in the docs):

<tabset>   <tab>     <tab-heading>       <span>hello</span><em>1</em>     </tab-heading>     One   </tab>   <tab heading="Two">Two</tab>   <tab heading="Three">Three</tab> </tabset> 

Updated plunker here.