ng-repeat on select with optgroup using json data in angular
<p>I have a JSON file which looks like this.</p>

<pre><code>[
  {"id":1,"catid":1,"Cat":"Category 1","label":"Label 1"},
  {"id":2,"catid":1,"Cat":"Category 1","label":"Label 2"},
  {"id":3,"catid":2,"Cat":"Category 2","label":"Label 3"},
  {"id":4,"catid":2,"Cat":"Category 2","label":"Label 4"},
  {"id":5,"catid":2,"Cat":"Category 2","label":"Label 5"},
  {"id":6,"catid":3,"Cat":"Category 3","label":"Label 6"}
]
</code></pre>

<p>I have managed to create a select menu which includes all the above.</p>

<pre><code>&lt;select&gt;
   &lt;option ng-repeat="referral in referralList" value="{{referral.id}}"&gt;{{referral.label}}&lt;/option&gt;
&lt;/select&gt;

Which produces this...

&lt;select&gt;
  &lt;option value="1"&gt;Label 1&lt;/option&gt;
  &lt;option value="2"&gt;Label 2&lt;/option&gt;
  &lt;option value="3"&gt;Label 3&lt;/option&gt;
  &lt;option value="4"&gt;Label 4&lt;/option&gt;
  &lt;option value="5"&gt;Label 5&lt;/option&gt;
  &lt;option value="6"&gt;Label 6&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I want to include the categories as optgroups within the select like below.</p>

<pre><code>&lt;select&gt;
  &lt;optgroup label="Category 1"&gt;
    &lt;option value="1"&gt;Label 1&lt;/option&gt;
    &lt;option value="2"&gt;Label 2&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Category 2"&gt;
    &lt;option value="3"&gt;Label 3&lt;/option&gt;
    &lt;option value="4"&gt;Label 4&lt;/option&gt;
    &lt;option value="5"&gt;Label 5&lt;/option&gt;
  &lt;/optgroup&gt;
  &lt;optgroup label="Category 3"&gt;
    &lt;option value="6"&gt;Label 6&lt;/option&gt;
  &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>