html select options custom template

Question

    <div class="input-group">
        <span class="input-group-addon start"
            ng-bind="type.refs['r1'].title"></span>
        <select ng-model="ligth_r1">
            <option value="" disabled selected>Select a Ligth</option>
            <option ng-attr-value="ligth" ng-repeat="ligth in calculator.ligths">{{ligth.name}} <span ng-show="ligth.recommended" class="label label-primary">Recommended</span></option>
        </select>
    </div>

My goal is mark one of these options with a bootstrap label with value "Recomended".

But "Recomended" appears white, not blue like i expected.

What im doing wrong?

Answer 1

Your best bet is to use a select2 component from here. It supports templates within the select, for example:

function format(state) {
    if (!state.id) return state.text; // optgroup
    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" +     state.text;
}
$("#e4").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});

And the HTML:

<select>
<option value="0" data-foo="bar">option one</option>
...