JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="SelectApp">
    <div ng-controller="selectController">
        <select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)">
            <option value="0">Select a category...</option>
            <option ng-repeat="category in categories" value="{{category.id}}" ng-disabled="category.disabled" ng-class="{'mainCategory' : category.disabled}">{{category.name}}</option>
        </select>
    </div>
</div>

CSS

<style> .mainCategory {
    background-color: #E9E9E9;
    font-weight: bold;
}
</style>

JavaScript

'use strict';

var app = angular.module('SelectApp', []);

app.controller('selectController', ['$scope', '$window', '$filter', function ($scope, $window, $filter) {

    $scope.categories = [{
        id: 1,
        name: "- Vehicles -",
        disabled: true
    }, {
        id: 2,
        name: "Cars"
    }, {
        id: 3,
        name: "Commercial vehicles",
        disabled: false
    }, {
        id: 4,
        name: "Motorcycles",
        disabled: false
    }, {
        id: 5,
        name: "Car & Motorcycle Equipment",
        disabled: false
    }, {
        id: 6,
        name: "Boats",
        disabled: false
    }, {
        id: 7,
        name: "Other Vehicles",
        disabled: false
    }, {
        id: 8,
        name: "- House and Children -",
        disabled: true
    }, {
        id: 9,
        name: "Appliances",
        disabled: false
    }, {
        id: 10,
        name: "Inside",
        disabled: false
    }, {
        id: 11,
        name: "Games and Clothing",
        disabled: false
    }, {
        id: 12,
        name: "Garden",
        disabled: false
    }];

    $scope.onCategoryChange = function () {
        var currentSelected = $filter('filter')($scope.categories, {id: $scope.itemSelected})[0]
        $window.alert("Selected Value: " + currentSelected.id + "\nSelected Text: " + currentSelected.name);

    };

}]);