Question

We have some drop downs in our app that we can NOT use ng-options with because we need to set the title attribute on the <options> tag itself which is not possible with ng-options.

The reason we need the title is because IE < 9 chops off values that are to long and they are only visible with the title(shows up on hover of the element)

Now, to see the issue I’m having look at the following JS fiddle.

http://jsfiddle.net/nstuart/nF7eJ/
(HTML Bit)

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="params.value">
        <option value="">Any</option>
        <option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" ng-selected="{{v.value == params.value}}">{{v.name}}</option>
    </select>
    <p>{{params.value}}</p>
</div>

Ideally the select would have ‘test3’ selected, but you can see it gets set to an empty option instead. I understand this is from the fact that the value of ng-model is not present in the ng-options, but thats because I have not defined one!

Any ideas on how to get something like this working? Possibly even be able to add title to the options generated by ng-options so we could use that instead?

EDIT

Updated the fiddle at: http://jsfiddle.net/nstuart/nBphn/2/ to as described in the answer below.

Answer 1

Actually, just remove the curly braces from the expression in ng-selected and it will work:

<option ng-repeat="v in options" 
        value="{{v.value}}" 
        title="{{v.name}}" 
        ng-selected="v.value == params.value">{{v.name}}
</option>

fiddle