ng-options track by and select as are not compatible

[damiengenet]

When both a track by expression and a select as expression are used in ng-options, binding doesn't work anymore.

For instance:

      it('should bind to scope value through experession while tracking/identifying objects', function() {
        createSelect({
          'ng-model': 'selected',
          'ng-options': 'item.id as item.name for item in values track by item.id'
        });

        scope.$apply(function() {
          scope.values = [{id: 10, name: 'A'}, {id: 20, name: 'B'}];
          scope.selected = scope.values[0].id;
        });

        expect(element.val()).toEqual('10');

        scope.$apply(function() {
          scope.selected = scope.values[1].id;
        });

        expect(element.val()).toEqual('20');
      });

It seems that in the ngOptions directive, the track function always directly use the value expression even if a select as expression is set.

[janv]

Oops, accidentally deleted my previous comment.
I created/modified a fiddle to illustrate the problem:
http://jsfiddle.net/qWzTb/418/

[SQiShER]

+1 I'm having the same problem.

[janv]

It's annoying but you can really just leave away the track by and it'll work.

[ahoereth]

Can confirm this problem still exists as of v1.3.0-beta.15.

[wojciechfornal]

Having the same problem with 1.2.20 :/

[mvalim]

Same here

[janv]

I've been encountering this again.
The problem was created in c32a859 by @quazzie:

For checking if an option is selected, the trackFn is used, where the valueFn should be used instead. I'll try to come up with a fix.

[janv]

Ok, I have investigated this. It's not actually a bug, just misleading documentation.
The thing is, you just can't combine value as label for collection with track by.
You have to pick the one or the other. There are two different Use Cases:

1. You want a shiny presentation for an ugly value

Use value as label:

items = [
  {value: 1, label: 'One'},
  {value: 2, label: 'Two'},
]
template = 'ng-options="item.value as item.label for items"'

When you change the dropdown, the model is assigned whatever you define in front of the as.

2. You want to iterate over complex objects

Use track by:

items = [
  {id: 1, ...},
  {id: 2, ...},
  {id: 3, ...},
]
template = 'ng-options="item as item.label for items track by items.id"'

When you change the dropdown, the model is assigned the item. The track by expression is only used to associate options with items through the value attribute on the <option>.

Illustrated in http://jsfiddle.net/0vpsv1wa/1/