From 21a6be3c5cbdf9b8c3d515485d288c31ca05a435 Mon Sep 17 00:00:00 2001
From: KJ Tsanaktsidis <kjtsanaktsidis@gmail.com>
Date: Mon, 15 Jul 2013 14:58:04 +1000
Subject: [PATCH] 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 #2113
---
 src/ng/directive/select.js      | 10 ++++++++-
 test/ng/directive/selectSpec.js | 39 +++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js
index a62f706c52da..15f76faaa644 100644
--- a/src/ng/directive/select.js
+++ b/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);
 
diff --git a/test/ng/directive/selectSpec.js b/test/ng/directive/selectSpec.js
index 5be7eb659eb8..e98ecea42fe2 100644
--- a/test/ng/directive/selectSpec.js
+++ b/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();