fix(select): correctly handle ngOptions and ngMultiple together

Previously, <select ngMultiple='...'> would only work with hard-coded
<option> elements underneath, not with an ngOptions attribute. This is
because the boolean ng-multiple attribute is only actually applied inside a
scope.$watch, which happens after the link function for select is called.

The fix is to scope.$watch on the multiple attribute in the select
directive, and refresh the directive when it changes.

Closes angular#2113

Author: KJTsanaktsidis

src/ng/directive/select.js

@@ -231,7 +231,15 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
         });
       }
 
-      if (optionsExp) Options(scope, element, ngModelCtrl);
+
+      if (optionsExp) {
+        scope.$watch(function() {
+          return jqLite(element).attr('multiple');
+        }, function(newMultiple) {
+          multiple = newMultiple;
+        });
+        Options(scope, element, ngModelCtrl);
+      }
       else if (multiple) Multiple(scope, element, ngModelCtrl);
       else Single(scope, element, ngModelCtrl, selectCtrl);
 

test/ng/directive/selectSpec.js

@@ -490,6 +490,14 @@ describe('select', function() {
       }, blank, unknown);
     }
 
+    function createNgMultiSelect(blank, unknown) {
+      createSelect({
+          'ng-model':'selected',
+          'ng-multiple':'multi',
+          'ng-options':'value.id as value.name for value in values'
+      }, blank, unknown);
+    }
+
 
     it('should throw when not formated "? for ? in ?"', function() {
       expect(function() {
@@ -1107,6 +1115,37 @@ describe('select', function() {
         expect(element.find('option')[1].selected).toBeTruthy();
       });
 
+      it('should work with ng-multiple and ng-options', function(){
+        createNgMultiSelect();
+
+        scope.$apply(function(){
+          scope.values = [{name: 'A', id: 'A'}, {name: 'B', id: 'A'}];
+          scope.selected = [];
+          scope.multi = false;
+        });
+
+        expect(element.attr('multiple')).toBeFalsy();
+
+        scope.$apply(function(){
+          scope.multi = true;
+        });
+
+        expect(element.attr('multiple')).toBeTruthy();
+
+        element.find('option')[0].selected = true;
+        element.find('option')[1].selected = true;
+        browserTrigger(element, 'change');
+
+        expect(scope.selected.length).toBe(2);
+
+        scope.$apply(function(){
+          scope.selected = ['A'];
+        });
+
+        expect(element.find('option')[0].selected).toBeTruthy();
+        expect(element.find('option')[1].selected).toBeFalsy();
+      });
+
 
       it('should update model on change', function() {
         createMultiSelect();