Make first value in dropdown bold in angular js

Question

I have a dropdown where I need to make first value in the dropdown to be bold.Dropdown code is as follows.

<div class="col-xs-3">
    <select-box id="ad-version-select" options="curItem.stats.version" model="state.version" initial="All" change="watchvalue()" ng-disabled="state.partialDisable"></select-box>
</div>

<select class="form-control" ng-model="model" ng-change="change()">

    <option ng-if="initial.length" ng-bind="initial" value=""></option>
    <option ng-repeat="option in options" value="{{getValue()}}" ng-selected="model==getValue()" ng-bind="getTitleVariable()"></option>
</select>

I tried like

<style>
div.col-xs-3>div:first-child {
    font-weight: bold;
}
</style>

but didn't worked. I am not getting any idea how to make only the first value bold. I can't use jquery. Can someone help me with this?

Answer 1

There need to be an alteration done in your css selector. You should select the first child of the option to make it bold.

option:first-child
{
  font-weight: bold;  
}

Here is the sample Fiddle

Hope this helps.

-Help :)

Answer 2

You can use ng-options with ng-class:

<select ng-model="Blah">
  <option ng-repeat="person in persons" ng-class="{red: person.id == 1}" ng-selected="{Blah == person.Name}">{{person.Name}}</option>  
</select>

app.controller('AppController',
[
  '$scope',
  function($scope) {
    $scope.persons = [
      {id: 1, Name:'John',Eligible:true},
      {id: 2,Name:'Mark',Eligible:true},
      {id: 3,Name:'Sam',Eligible:false},
      {id: 4, Name:'Edward',Eligible:false},
      {id: 5, Name:'Michael',Eligible:true}
    ];

    $scope.Blah = 'Sam';

  }
]);

Here is the Plunker

Answer 3

@Help's solution should work. But not all browsers support styles in <select><option>. Maybe you need to build the component by yourself, something like this:

<div class="select">
  <div class="selected" ng-bind="current.title"></div>
  <div class="options">
    <div class="option" ng-repeat="option in options" value="{{option.value}}" ng-bind="option.title" ng-click="current=option"></div>
  </div>
</div>

.option:first-child {font-weight: bold;}

You'll need to add some more scripts and styles to make it work like a natural <select>.