fix($compile) support templates with select content root nodes

src/ng/compile.js

@@ -514,7 +514,8 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       Suffix = 'Directive',
       COMMENT_DIRECTIVE_REGEXP = /^\s*directive\:\s*([\d\w\-_]+)\s+(.*)$/,
       CLASS_DIRECTIVE_REGEXP = /(([\d\w\-_]+)(?:\:([^;]+))?;?)/,
-      TABLE_CONTENT_REGEXP = /^<\s*(tr|th|td|thead|tbody|tfoot)(\s+[^>]*)?>/i;
+      TABLE_CONTENT_REGEXP = /^<\s*(tr|th|td|thead|tbody|tfoot)(\s+[^>]*)?>/i,
+      SELECT_CONTENT_REGEXP = /^<\s*(option|optgroup)(\s+[^>]*)?>/i;
 
   // Ref: http://developers.whatwg.org/webappapis.html#event-handler-idl-attributes
   // The assumption is that future DOM event attribute names will begin with
@@ -1657,7 +1658,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
       });
     }
 
-
+    /**
+     * On IE9, certain elements such as <thead> and <option> need to be
+     * wrapped with other elements like <table> and <select>, respectively.
+     *
+     * @param {string} template The template to check
+     * @returns {JqLite} The wrapped template
+     */
     function directiveTemplateContents(template) {
       var type;
       template = trim(template);
@@ -1672,6 +1679,12 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           return table.children('tr');
         }
         return table.children('tr').contents();
+      } else if ((type = SELECT_CONTENT_REGEXP.exec(template))) {
+        type = type[1].toLowerCase();
+        var select = jqLite('<select>' + template + '</select>');
+        if (/(option|optgroup)/.test(type)) {
+          return select.children(type);
+        }
       }
       return jqLite('<div>' +
                       template +

test/ng/compileSpec.js

@@ -541,6 +541,14 @@ describe('$compile', function() {
             replace: true,
             template: '<tfoot><tr><td>TD</td></tr></tfoot>'
           }));
+          directive('replaceWithOption', valueFn({
+            replace: true,
+            template: '<option>OPTION</option>'
+          }));
+          directive('replaceWithOptgroup', valueFn({
+            replace: true,
+            template: '<optgroup>OPTGROUP</optgroup>'
+          }));
         }));
 
 
@@ -746,6 +754,20 @@ describe('$compile', function() {
           }).not.toThrow();
           expect(nodeName_(element)).toMatch(/tfoot/i);
         }));
+
+        it('should support templates with root <option> tags', inject(function($compile, $rootScope) {
+          expect(function() {
+            element = $compile('<div replace-with-option></div>')($rootScope);
+          }).not.toThrow();
+          expect(nodeName_(element)).toMatch(/option/i);
+        }));
+
+        it('should support templates with root <optgroup> tags', inject(function($compile, $rootScope) {
+          expect(function() {
+            element = $compile('<div replace-with-optgroup></div>')($rootScope);
+          }).not.toThrow();
+          expect(nodeName_(element)).toMatch(/optgroup/i);
+        }));
       });
 
 
@@ -867,6 +889,14 @@ describe('$compile', function() {
               replace: true,
               templateUrl: 'tfoot.html'
             }));
+            directive('replaceWithOption', valueFn({
+              replace: true,
+              templateUrl: 'option.html'
+            }));
+            directive('replaceWithOptgroup', valueFn({
+              replace: true,
+              templateUrl: 'optgroup.html'
+            }));
           }
         ));
 
@@ -1556,6 +1586,24 @@ describe('$compile', function() {
           $rootScope.$digest();
           expect(nodeName_(element)).toMatch(/tfoot/i);
         }));
+
+        it('should support templates with root <option> tags', inject(function($compile, $rootScope, $templateCache) {
+          $templateCache.put('option.html', '<option>OPTION</option>');
+          expect(function() {
+            element = $compile('<div replace-with-option></div>')($rootScope);
+          }).not.toThrow();
+          $rootScope.$digest();
+          expect(nodeName_(element)).toMatch(/option/i);
+        }));
+
+        it('should support templates with root <optgroup> tags', inject(function($compile, $rootScope, $templateCache) {
+          $templateCache.put('optgroup.html', '<optgroup>OPTGROUP</optgroup>');
+          expect(function() {
+            element = $compile('<div replace-with-optgroup></div>')($rootScope);
+          }).not.toThrow();
+          $rootScope.$digest();
+          expect(nodeName_(element)).toMatch(/optgroup/i);
+        }));
       });