title: Angular.js Select with ngOptions: Label the optgroup
body: <p>I just started to play with Angular.js and have a question about ngOptions: Is it possible to label the optgroup?</p>
  
  <p>Lets assume 2 objects - cars and garages.</p>
  
  <pre class="lang-js prettyprint-override"><code>cars = [
      {"id": 1, "name": "Diablo", "color": "red", "garageId": 1},
      {"id": 2, "name": "Countach", "color": "white", "garageId": 1},
      {"id": 3, "name": "Clio", "color": "silver", "garageId": 2},
      ...
  ]
  garages = [
      {"id": 1, "name": "Super Garage Deluxe"},
      {"id": 2, "name": "Toms Eastside"},
      ...
  ]
  </code></pre>
  
  <p>With this code I got nearly the result I want:</p>
  
  <pre class="lang-js prettyprint-override"><code>ng-options = "car.id as car.name + ' (' + car.color + ')' group by car.garageId for car in cars"
  </code></pre>
  
  <p>Result in the select:</p>
  
  <pre><code>-----------------
  1
   Diablo (red)
   Countach (white)
   Firebird (red)
  2
   Clio (silver)
   Golf (black)
  3
   Hummer (silver)
  -----------------
  </code></pre>
  
  <p>But I want to label the optgroups like "Garage 1", "Garage 2", ... or even better display the name of the garage and not just the garageId.</p>
  
  <p>The <a href="http://docs.angularjs.org/api/ng/directive/select" rel="noreferrer">angularjs.org documentation for select</a> says nothing about labels for the optgroup, but I would like to extend the group by part of ngOptions like <code>group by car.garageId as 'Garage ' + car.garageId</code> or <code>group by car.garageId as getGarageName(car.garageId)</code> - <em>which sadly is not working</em>.</p>
  
  <p>My only solution so far is to add a new property "garageDisplayName" to the car objects and store there the id + garage name and use that as group by parameter. But I don't want to update all cars whenever a garage name is changed.</p>
  
  <p>Is there a way to label the optgroups with ngOptions, or should I use ngRepeat in that case?</p>