Use select2.css styles as starting point

[dimirc]

Instead of creating the styles from scratch, we could start with same css from select2 and later on modify them if needed.

Here is a demo with these changes

[dimirc]

With this new commit I added some child-directives

<ui-select ng-model="data.custom" style="width:300px">
  <match placeholder="Pick one...">{{$select.selected.name}}</match>
  <choices data="item in data.items | filter : $select.search">
      <div ng-bind-html="trustAsHtml((item.name | highlight:$select.search))"/></div>
      <div> {{item.email}} </div>
  </choices>
</ui-select>

Current features:

• Now its possible to customize list-item <choices> and selected <match>
• Text is highlighted on label
• When moving with cursor up/down, scroll the matches to always keep them visible
• Lose focus when clicking outside the control
• Specify Placeholder at <match> directive

The demo is updated

[ProLoser]

Instead of using dom traversal, create child directives. This way the child directive can provide you with the html you need. Unfortunately it will not be as clean to inject the html back in.

I would create a non-select2 class in addition and use that instead of hard coding the select2 classes into the Javascript

[dimirc]

@ProLoser I created a new pull request with some changes related to what we were talking here. Specially throwing templates on separate files