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/

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.

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

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'
  }];   
}