Angularjs ng-bind-html resize button to fit content size?

Question

Given list of texts with some FontAwesome icons, my controller need to pass that to template, and render each into button.

Example text:

'<i class="fa fa-hourglass fa-fw">Postpone'

My code:

<button ng-repeat="text in texts" type="button">[[text]]</button>

However it wont work as expected.

• [[text]] will escape any html
• ng-bind-html will fail to resize button after inserting text

What else can be done here?

Answer 1

<i> tag is not closed properly, which will result in browser and/or $sanitize closing </i> at the end of text. <i> with some text in it still have size of font awesome, ng-bind-html nor button will know about text.

Valid example:

'<i class="fa fa-hourglass fa-fw"></i>Postpone'