ng-bind-html doesn't work for ng-options

Question

I need to sanitize special characters in options, but it doesn't work correctly. Maybe anybody can tell me how i should do it correctly?

For example:

HTML:

<div ng-controller="Ctrl">
    <select id="limitType" name="limit" ng-model="selectedLimit" ng-options="limit.text for limit in limits" ng-init="selectedLimit='5'" ng-bind-html="limit.text"></select>
<div>

JS:

var app = angular.module('app', ['ngSanitize']);

function Ctrl($scope) {
  $scope.limits = [{
    text: 'Afficher ™ par page'
  }, {
    text: 'Afficher 10 par page'
  }, {
    text: 'Afficher 15 par page'
  }, {
    text: 'Afficher 20 par page'
  }];   
}

Here is link on fiddle: http://jsfiddle.net/rfTV2/3/

Hindustan

you need to add angular-sanitise.js to "External resources". Look here – Appalachian

If you open attached link then you can see, that i added sanitise via option for angularjs-1.0.3. BTW, when i include include angularjs-1.2 and add angular-sanitise.js in "External resources" it still will not work. – Hindustan

Answer 1

You have three options.

1. You can include unicode characters in your source directly
2. You can convert the html entities to unicode in the browser using JavaScript
3. Or you can fall-back to ng-repeat and use ng-bind-html on your option tag.

Depose

Answer 2

I think CAT already provided answer. I am just providing readigs for how to use ng-bind-html

1. ng-bind-html directive
2. ng-sanitize module
3. $sce service

Fara

Answer 3

Have you tried ?

$sce.trustAsHtml()

In your example it would be something like this (not tested)

function Ctrl($scope, $sce) {
  $scope.limits = [{
    text: $sce.trustAsHtml('Afficher ™ par page')
  }, {
    text: 'Afficher 10 par page'
  }, {
    text: 'Afficher 15 par page'
  }, {
    text: 'Afficher 20 par page'
  }];   
}

Stillman

Could you tell me how should i use it in my example? – Hindustan

And try to interpolate it as usual without ng-bind-html. – Stillman