title: Adding optgroups in angularjs is proving tricky
body: <p>I'm using angularjs, and I've been trying to create an optgroup for the past 2 days while working on some other stuff, and I'm stumped. I had to create an ng-options, but didn't consider an optgroup until I realized I needed one. I tried using the ng-options to add it in, but it would either ignore it completely, mess up the code or ignore the options completely.</p>
  
  <p>I had no clue if I could actually use the (double) ampersand, so I tried combining both ng-options, but to no avail. Furthermore, I toyed around with a specific code found in odetocode (which seemed promising, but could not be incorporated with my code, because of its own limited structure). </p>
  
  <p>Everything I tried breaks my code. The original code is below (the one prior to most of my many other mods), but I also have the plunker for it:</p>
  
  <p><a href="http://plnkr.co/edit/xCLe2GFShUMUlIySPLH9?p=info">http://plnkr.co/edit/xCLe2GFShUMUlIySPLH9?p=info</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  
    &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
  
    &lt;form name="FORM" ng-controller="appController"&gt;
  &lt;the-ratings  model="review.ratings"&gt;         
  &lt;/the-ratings&gt;
  &lt;/form&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>(function(){
  
  var app = angular.module('myApp',[]);
  
  app.controller('appController', ['$scope', function($scope) {
        $scope.review = {};
        $scope.review.ratings = '5 stars';
    }])
    app.directive('theRatings', function() {
  
      return {
        restrict: 'E',
        scope: { model: '=' },
        template: '&lt;select ng-model="model" ng-options="option.name as option.value for option in options"&gt;&lt;/select&gt;',
        controller: function($scope) {
          $scope.options = [
              { name:'test', namegroup: 'Rate the product', value:'test2',valueName: 'NA' },
              { name: '1 star', value: '1 star' }, 
              { name: '2 stars', value: '2 stars' }, 
              { name: '3 stars', value: '3 stars' },
              { name: '4 stars', value: '4 stars' },
              { name: '5 stars', value: '5 stars' }
          ];
        }
  
      };
    });
  
  
  })();
  </code></pre>