One of the bugs that was filed for an AngularJS part of our system was about a selectlist showing the binding in stead of the value for several options. As soon as stuff (options in this case) started moving around, it got even prettier…

select-gone-rogue.png

I’ve tried several solutions like using ng-value in stead of value and using the fixIE() solution that roams the internet. Unfortunately all to no avail. In the end, a solution was found. Let me share it so you don’t have to look for one as long as I did ;)

Original code

Our original code was in a directive that actually used two selectlists to facilitate moving values from one to another, enabling and disabling items. It looked something like this:

<div>
    <select ng-model="selectedLeft" multiple style="float: left; width:40%; height: 300px;">
        <option ng-repeat="option in selected track by $index" value="{{option}}">{{option | lowercase}}</option>
    </select>
    <section style="float: left; padding: 10px;">
        <button ng-click="moveRight()" ng-disabled="selectedLeft.length < 1">&gt;&gt;</button>
        <button ng-click="moveLeft()" ng-disabled="selectedRight.length < 1">&lt;&lt;</button>
    </section>
    <select ng-model="selectedRight" multiple style="float: left; width:40%; height: 300px;">
       <option ng-repeat="option in rightList track by $index" value="{{option}}">{{option | lowercase}}</option>
    </select>
</div>

Solution

In the end, changing the way we built up the select helped: in stead of using an ng-repeat on the option tag, we used ng-options on the select tag. This fixed the issue for us! The HTML of the directive looks like this now:

<div>
    <select ng-model="selectedLeft" multiple style="float: left; width:40%; height: 300px;" ng-options="option as option|lowercase for option in selected track by option">
    </select>
    <section style="float: left; padding: 10px;">
        <button ng-click="moveRight()" ng-disabled="selectedLeft.length < 1">&gt;&gt;</button>
        <button ng-click="moveLeft()" ng-disabled="selectedRight.length < 1">&lt;&lt;</button>
    </section>
    <select ng-model="selectedRight" multiple style="float: left; width:40%; height: 300px;" ng-options="option as option|lowercase for option in rightList track by option">
    </select>
</div>

Hope this helps.