Q:

ngStrap Dropdown template

I'm pretty new to angular and I'm using angular strap to customize a dropdown button because I wanted some HTML formatting on the resulting dropdown options.
I've managed to successfully assign a template to the dropdown options, but now I want to also style the button itself with another template.
Because I wanted it to look from this:

To this:

Is this possible?
This is how my HTML tag looks now:
<button class="form-control custom-select" data-html="1" ng-model="myModel" bs-options="icon.value as icon.label for icon in icons" data-template-url="dropdown.tpl.js"  bs-select></button>

A:

What you're asking for requires only some CSS. When your HTML is compiled, the ouput (what is displayed on the browser) is:
<button class="form-control custom-select"
        data-html="1
        ng-model="myModel"
        bs-options="icon.value as icon.label for icon in icons"
        data-template-url="dropdown.tpl.js"
        bs-select>
   <!-- placeholder -->
   <span class="caret"></span>
</button>

You have to customize the text alignment of your button and also the shape and position of the caret (which is a bootstrap class that creates an arrow). 
You can find some advice here.
EDIT:
To use your HTML, you can pass a caretHtml argument for bsSelect directive:
<button class="form-control custom-select"
        data-html="1
        ng-model="myModel"
        bs-options="icon.value as icon.label for icon in icons"
        data-template-url="dropdown.tpl.js"
        data-caret-html="<span class='myClass'></span>"
        bs-select>
   <!-- placeholder -->
   <span class="caret"></span>
</button>

This solution is not in the doc of Angular Strap but caretHtml argument exists in the source code. Be careful it may be removed in future updates.

