angularjs app not showing special characters in placeholder text in ui-select field

Question

I have a multilingual angular app, and one of the languages has special characters, umlaut, for example. They are being shown fine on the labels, titles, headings, but not in placeholder text. here is the code i have :

<label translate="app.title"></label>
<ui-select name="myoption" ng-model="app.option" theme="selectize">
    <ui-select-match placeholder="{{ 'app.placeholder' | translate }}">
        {{$select.selected.value}}
    </ui-select-match>
    <ui-select-choices repeat="o.key as o in tras.app.options | filter: $select.search">
        <div ng-bind-html="o.value | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

label title has a special character like ä or ö which are being shown fine. But the same word is also in the placeholder text, but it is being shown as &#228. Why is it behaving like this? Could somebody help to fix it?

Answer 1

this issue has been discussed here https://github.com/angular-translate/angular-translate/issues/1282

you need to turn off sanitize:

$translateProvider.useSanitizeValueStrategy(null);

Answer 2

Use ng-bind-html for the markup like so:

<ui-select-match placeholder="{{ 'app.placeholder' | translate }}" 
                 ng-bind-html="selected.selected.value">
</ui-select-match>

but for the placeholder you'll have to go with AHC's solution above.