I have a page using angular where im implementing popover from bootstrap:

<img class="state-msg" data-toggle="popover" ng-popover data-content="{{item.status.message}}" data-trigger="hover" data-placement="top" ng-src="{{item.status.stateIcon}}"/>

The data-content doesnt get rendered correctly. It returns literaly {{item.status.message}} instead of the value of message.

Does angular have an issue w expressions in 'data-' attributes?

Tnx

I have a page using angular where im implementing popover from bootstrap:

<img class="state-msg" data-toggle="popover" ng-popover data-content="{{item.status.message}}" data-trigger="hover" data-placement="top" ng-src="{{item.status.stateIcon}}"/>

The data-content doesnt get rendered correctly. It returns literaly {{item.status.message}} instead of the value of message.

Does angular have an issue w expressions in 'data-' attributes?

Tnx

• javascript
• twitter-bootstrap
• angularjs

• is it all happens in ng-repeat ? – Ivan Chernykh Commented Aug 28, 2013 at 12:11
• It should work. Are the binding not working for this attribute only? – Chandermani Commented Aug 28, 2013 at 13:05

2 Answers 2

You can try this out:

ng-attr-src="{{item.status.stateIcon}}"

From documentation:

"If an attribute with a binding is prefixed with ngAttr prefix (denormalized prefix: 'ng-attr-', 'ng:attr-') then during the pilation the prefix will be removed and the binding will be applied to an unprefixed attribute. This allows binding to attributes that would otherwise be eagerly processed by browsers in their unpiled form (e.g. img[src] or svg's circle[cx] attributes)."

Remove the interpolation notation like this. With {{, }}, AngularJS does string interpolation rather than model binding.

data-content="item.status.message"