JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

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)" 
        ng-options="category.name group by category.group for category in categories">
   
    </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: 0, name: "Select a category..."},
        { id: 1, name: "Cars", group : "- Vehicles -" },
       { id: 2, name: "Commercial vehicles", disabled: false,group : "- Vehicles -" },
       { id: 3, name: "Motorcycles", disabled: false, group : "- Vehicles -"  },
       { id: 4, name: "Car & Motorcycle Equipment", disabled: false,
       group : "- Vehicles -" },
       { id: 5, name: "Boats", disabled: false, group : "- Vehicles -"  },
       { id: 6, name: "Other Vehicles", disabled: false, group : "- Vehicles -"  },
       { id: 7, name: "Appliances", disabled: false , group : "- House and Children -" },
       { id: 8, name: "Inside", disabled: false,group : "- House and Children -"  },
       { id: 9, name: "Games and Clothing", disabled: false,group : "- House and Children -"  },
       { id: 10, name: "Garden", disabled: false,group : "- House and Children -"  }
    ];
    
    $scope.itemSelected = $scope.categories[0];

    $scope.onCategoryChange = function () {

        $window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name);

    };

}]);