Bootstrap caret class does not work with ng-bind

Question

I have the following piece of code:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" ng-bind="user.displayName">
    <b class="caret"></b>
</a>

As you can see I use caret class from Bootstrap and ng-bind from AngularJS. Unfortunately when I use mg-bind the caret is not visible on my webpage. However, when I don't use mg-bind and just inline the value like this:

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    {{user.displayName}}<b class="caret"></b>
</a>

the caret is visible.

Any ideas how to make the caret visible while using ng-bind?

Have you tried another HTML element instead of ``? – Aibrean Jul 03 '14 at 16:41 — Aibrean, Jul 03 '14 at 16:41

score 5 · Accepted Answer · edited May 23 '17 at 12:15

From the docs: https://docs.angularjs.org/api/ng/directive/ngBind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression

So, using ng-bind replaces the content of the element (including your caret).

You could do something like this:

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <span ng-bind="user.displayName"></span><b class="caret"></b>
</a>

Edit: really good read semi-related to this topic: AngularJS : Why ng-bind is better than {{}} in angular?

Bootstrap caret class does not work with ng-bind

1 Answers1