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', function ($scope, $window) {

    $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 () {
        $window.alert("Selected Value: " + $scope.categories[$scope.itemSelected - 1].id + "\nSelected Text: " + $scope.categories[$scope.itemSelected - 1].name);

    };

}]);