I am new to Angular and am trying to make a basic prototype to sell the company on using AngularJS. I've got all the basics down, but in trying to meet the way marketing wants options to show in certain drop-down lists, I am running into trouble. They want a visual like this (without the bullets) where the bold items are optgroup elements:

* Bronze
* White
* Beige
* **TwoTone**
	+ **WhtExt**
		- W Ext/Brz Int
		- W Ext/Drk Oak Int
	+ **BrzExt**
		- Brz Ext/Wht Int
		- Brz Ext/Drk Oak Int

The HTML looks like this:

```
        <fieldset id="fs_frameColor">
            <label class="col-xs-4" for="frameColor">Frame Color *</label>                
            <select class="col-xs-8" id="frameColor"
                    ng-model="vm.frameColor"
                    ng-change="vm.frameColorUpdated()"
                    ng-options="color.label for color in vm.frameColors">
            </select>
        </fieldset>            

```

I was hoping I could have the frameColors array full of objects that contained label and value properties, but additionally something like a type and level property so that if the type was option, I could output a regular `<option>` element. If the type was optiongroup, I could output a regular `<optgroup>`. 

I know up to this point it is all simple enough. You could, for example, introduce a group by in the ng-options directive and the directive would automatically create optgroup elements based on the group by. However, because of the way marketing wants these to appear, the nesting is multi-level.

Because of the multi-level nature, that is why I was hoping to be able to use type and level properties on objects in my array so that, for example, the "**TwoTone**" item above would have type: "OptionGroup" so I could output an `<optgroup/>` element and then level:1 so it would be indented as normal. Then its child "**WhtExt**" item would have type: "OptionGroup", but a level:2 so I could output an `<optgroup/>` element with its normal bold text, but that text be indented a couple spaces. That group's child option elements would have something like type:"Option" and level:3 so `<option/>` elements would be output with the text indented sufficiently to make them appear as children to "**WhtExt**" parent optgroup. Not shown here, but if they wanted child option elements to show under "**TwoTone**" optgroup before that "**WhtExt**" child optgroup, that object in the data array would have type:"Option" and level:2.

I've had success doing this with directives, but only if I embed the `<select><option/><option/><optgroup><optgroup><option/><option/></optgroup><optgroup><option/><option/></optgroup></optgroup></select>` code directly in my html and add the needed directives to the specific child elements. However, long-term this data will come from some API so I am trying to determine a way to accomplish all this custom multi-tier group using ng-options tied to the values of properties in the array data.

Since this is meant to be a prototype, the input data is fluid and I am trying to come up with a structure that will convey enough information for an angular directive (or some other angular mechanism) to output the result shown above. Here is an example of the hard-coded data I am binding to.

```
            vm.frameColors = [
            {
                value: "BZ",
                label: "Bronze",
                type: "Option",
                level: "0"
            },
            {
                value: "W",
                label: "White",
                type: "Option",
                level: "0"
            },
            {
                value: "B",
                label: "Beige",
                type: "Option",
                level: "0"
            },
            {
                value: "TwoTone",
                label: "TwoTone",
                type: "OptionGroup",
                level: "0"
            },
            {
                value: "WhtExt",
                label: "WhtExt",
                type: "OptionGroup",
                level: "1"
            },
            {
                value: "WB",
                label: "W Ext/Brz Int",
                type: "Option",
                level: "2"
            },
            {
                value: "WDO",
                label: "W Ext/Drk Oak Int",
                type: "Option",
                level: "2"
            },
            {
                value: "BrzExt",
                label: "BrzExt",
                type: "OptionGroup",
                level: "1"
            },
            {
                value: "BW",
                label: "Brz Ext/Wht Int",
                type: "Option",
                level: "2"
            },
            {
                value: "BDO",
                label: "Brz Ext/Drk Oak Int",
                type: "Option",
                level: "2"
            },
        ];

```

Any help would be greatly appreciated.

-Mike