AngularJS select, set the background color of 1 item of the dropdown

Question

I have a dropdown list of many item and if I click on the select to display the list I want to highlight some items of that list in different color.

Expected Behaviour: When we click on the Select (before selecting any item), how to have the item "Section3" from the list be highlighted in Yellow (background section) if the tag Obligatory is true?

$scope.globalSections = [
        {name: 'Section1', department: 'Summary'},
        {name: 'Section2', department: 'Group1'}, 
        {name: 'Section3', department: 'Group1', obligatory: true},
        {name: 'Section4', department: 'Group2'},
        {name: 'Section5', department: 'Group2'}
      ];
      $scope.selectedSection = $scope.globalSections[0]; // Summary

<select ng-model="selectedSection" ng-options="section.name group by section.department for section in globalSections">

plnkr version

Take a look at: http://stackoverflow.com/questions/15264051/how-to-use-ng-class-in-select-with-ng-options — Tom Arad, May 13 '15 at 19:16
Yes the code look fine, but the [Plnkr Proposed](http://plnkr.co/edit/rbc4GWBffi4eFYhbvS6u?p=preview) do not seems to work (display color) in Chrome or Safari. — MatMath, May 14 '15 at 14:30

score 0 · Accepted Answer · answered Aug 05 '15 at 15:29

So this isn't going to be the answer you want but you aren't going to be able to accomplish this in a cross browser manner without faking it. For another project I wanted to accomplish something similar to this and the only way is to make a fake selection object or use a 3rd party library like

https://select2.github.io/examples.html or https://github.com/angular-ui/ui-select

AngularJS select, set the background color of 1 item of the dropdown

1 Answers1