Wrapping select with ng-options in a custom directive

[Thomas Brunoli]

Hey there,

I'm writing a web app and I have some custom HTML that I want to wrap every select dropdown in (for styling reasons). Is there a way to make a custom directive (like <my-select>, or even overriding <select>) that has some surrounding elements without losing the ng-options and ng-model attributes? Here's an example of the plain html that i would like to surround the select element (without any angular stuff)

<div class="select">

  <select ng-model="myModel">

    <option value="val1">Value 1</option>

    <option value="val2">Value 2</option>

    <option value="val3">Value 3</option>

  </select>

  <span class="select-value">Value 1</span>

  <span class="select-arrow"><i></i></span>

</div>

I'd like to be able to replace that with something like this and have it use a template or something

<my-select ng-model="myModel" ng-options="i.val as i.label for i in options">

or ideally just select instead of my-select. I tried making a directive with a template and the only way I could accomplish it was by passing in the options object/array and using a static ng-options expression, which i'd really like to avoid so I can re-use the directive in other projects. I also saw this page (http://blog.benkuhl.com/2013/08/how-to-use-ng-options-in-a-custom-directive-for-a-dropdown/), which uses string interpolation in a template which seems very icky and probably not very performant. 

Does anyone know how I would go about this, or another directive that has already accomplished it?

Cheers,

Tom