fix(uiSelectChoices) broken id interpolation

The id attribute on ui-select-choices-row is no longer interpolated
correctly when using ui select with angular v1.5+.

This change switches to using ng-attr-id to ensure the id value is
correctly interpolated before being assigned to the element.

Fixes #1522

Author: user378230

src/bootstrap/choices.tpl.html

@@ -4,7 +4,7 @@
   <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
     <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind="$group.name"></div>
-    <div id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"
+    <div ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"
     ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" role="option">
       <a href="" class="ui-select-choices-row-inner"></a>
     </div>

src/select2/choices.tpl.html

@@ -3,7 +3,7 @@
     <div ng-show="$select.choiceGrouped($group)" class="ui-select-choices-group-label select2-result-label" ng-bind="$group.name"></div>
     <ul role="listbox"
       id="ui-select-choices-{{ $select.generatedId }}" ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }">
-      <li role="option" id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}">
+      <li role="option" ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}">
         <div class="select2-result-label ui-select-choices-row-inner"></div>
       </li>
     </ul>

test/select.spec.js

@@ -399,6 +399,23 @@ describe('ui-select tests', function() {
     expect(getMatchLabel(el)).toEqual('Samantha');
   });
 
+  it('should correctly render initial state with track by $index', function () {
+    
+    var el = compileTemplate(
+      '<ui-select ng-model="selection.selected"> \
+        <ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
+        <ui-select-choices repeat="person in people track by $index"> \
+          {{person.email}} \
+        </ui-select-choices> \
+      </ui-select>'
+    );
+
+    openDropdown(el);
+
+    var generatedId = el.scope().$select.generatedId;
+    expect($(el).find('[id$="row-' + generatedId + '-0"]').length).toEqual(1);
+  });
+
   it('should utilize wrapper directive ng-model', function() {
     var el = compileTemplate('<wrapper-ui-select ng-model="selection.selected"/>');
     scope.selection.selected =  { name: 'Samantha',  email: 'something different than array source',  group: 'bar', age: 30 };