JSFiddle - React, Tailwind, and code Playground

by Jasper Krielaars

HTML

<div ng-app>
  
  <div ng-controller="DemoCtrl">
     <select>
    <optgroup ng-repeat="header in dropdown" label="{{ header.name }}">
        <option ng-repeat="item in header.items" value="{{ item.value }}">{{ item.name }}</option>
    </optgroup>
</select>
  </div>
    
</div>

JavaScript

function DemoCtrl($scope){ 
	$scope.dropdown = [
    {
        name:'Malaysia',
        items: [
            {name: 'sunway', value: 1},
            {name: 'subang', value: 2},
            {name: 'petaling jaya', value: 3}
        ]
    },
    {
        name:'Japan',
        items: [
            {name: 'tokyo', value: 4},
            {name: 'osaka', value: 5},
            {name: 'kyoto', value: 6}
        ]
    }
	]
}