fix(ngOption): accept 0 as an option group

Accept `0` and an option group

Close angular#7015

BREAKING CHANGE

When using option groups at an ng-option, the literal `0` will
be handled as a group with label `'0'`. Use the literal string `''`
or undefined for options that should not be in any option group

Author: lgalfaso

src/ng/directive/select.js

@@ -315,7 +315,11 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
         var displayFn = $parse(match[2] || match[1]),
             valueName = match[4] || match[6],
             keyName = match[5],
-            groupByFn = $parse(match[3] || ''),
+            groupByGet = $parse(match[3] || ''),
+            groupByFn = function (scope, locals) {
+              var result = groupByGet(scope, locals);
+              return isUndefined(result) ? '' : result;
+            },
             valueFn = $parse(match[2] ? match[1] : valueName),
             valuesFn = $parse(match[7]),
             track = match[8],
@@ -455,7 +459,7 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
 
             locals[valueName] = values[key];
 
-            optionGroupName = groupByFn(scope, locals) || '';
+            optionGroupName = groupByFn(scope, locals);
             if (!(optionGroup = optionGroups[optionGroupName])) {
               optionGroup = optionGroups[optionGroupName] = [];
               optionGroupNames.push(optionGroupName);

test/ng/directive/selectSpec.js

@@ -782,28 +782,37 @@ describe('select', function() {
 
         scope.$apply(function() {
           scope.values = [{name: 'A'},
-                          {name: 'B', group: 'first'},
-                          {name: 'C', group: 'second'},
-                          {name: 'D', group: 'first'},
-                          {name: 'E', group: 'second'}];
+                          {name: 'B', group: 0},
+                          {name: 'C', group: 'first'},
+                          {name: 'D', group: 'second'},
+                          {name: 'E', group: 0},
+                          {name: 'F', group: 'first'},
+                          {name: 'G', group: 'second'}];
           scope.selected = scope.values[3];
         });
 
         expect(element.val()).toEqual('3');
 
-        var first = jqLite(element.find('optgroup')[0]);
-        var b = jqLite(first.find('option')[0]);
-        var d = jqLite(first.find('option')[1]);
-        expect(first.attr('label')).toEqual('first');
+        var zero = jqLite(element.find('optgroup')[0]);
+        var b = jqLite(zero.find('option')[0]);
+        var e = jqLite(zero.find('option')[1]);
+        expect(zero.attr('label')).toEqual('0');
         expect(b.text()).toEqual('B');
-        expect(d.text()).toEqual('D');
+        expect(e.text()).toEqual('E');
 
-        var second = jqLite(element.find('optgroup')[1]);
-        var c = jqLite(second.find('option')[0]);
-        var e = jqLite(second.find('option')[1]);
-        expect(second.attr('label')).toEqual('second');
+        var first = jqLite(element.find('optgroup')[1]);
+        var c = jqLite(first.find('option')[0]);
+        var f = jqLite(first.find('option')[1]);
+        expect(first.attr('label')).toEqual('first');
         expect(c.text()).toEqual('C');
-        expect(e.text()).toEqual('E');
+        expect(f.text()).toEqual('F');
+
+        var second = jqLite(element.find('optgroup')[2]);
+        var d = jqLite(second.find('option')[0]);
+        var g = jqLite(second.find('option')[1]);
+        expect(second.attr('label')).toEqual('second');
+        expect(d.text()).toEqual('D');
+        expect(g.text()).toEqual('G');
 
         scope.$apply(function() {
           scope.selected = scope.values[0];