data-icon when using ng-options

[Bhaall]

Is it possible to add an icon to dynamic options?

It's certainly possible to add to static options: data-icon="icon-heart" The icon is picked up by the jquery plugin.

But what if these options are being generated by ng-options? (At this point I don't care if it's the same icon repeated for each - I just want to know if placing an icon using ng-options is even possible with angular-bootstrap-select.)

[joaoneto]

@Bhaall, The only way to do this, is using ng-repeat to generate options with custom attrs.

Code in master is capable to do this:

<div ng-controller="SomeCtrl">
  <h3>Works with option data-icon and ngOptions</h3>
  <select selectpicker="">
    <option value="">Select one</option>
    <option ng-repeat="i in icons" value="{{i.id}}" data-icon="{{i.icon}}">{{i.title}}</option>
  </select>
</div>

.controller('SomeCtrl', function ($scope, $timeout) {
  $scope.icons = [
    { id: 0, icon: 'glyphicon glyphicon-search', title: 'Search' },
    { id: 1, icon: 'glyphicon glyphicon-headphones', title: 'Headphones' },
    { id: 2, icon: 'glyphicon glyphicon-ok', title: 'Ok' },
    { id: 3, icon: 'glyphicon glyphicon-user', title: 'User' }
  ];
})

[blackotruck]

Hi! I'm trying this but can't get it to work... In fact i would like to use custome html on th options passing values from the item e.g.

<option data-content="<span class='{{item.class}}'>{{item.name}}</span>"></option>

Is this currently possible?

[thouse75]

Hi joaoneto - your solution doesn't work for me. I'm using angular 1.2.28 bootstrap select 1.6.3 and bootstrap 3.3.1.