angularjs - How to add a header in dropdown list (with ng-options Demo)

Question

I want to create a dropdown list in AngularJS from a JSON file.
How do I add a header for similar list items in my dropdown?
For example:

Malaysia (add the header here)
--sunway
--subang
--petaling jaya
--shah alam
--Klang
--Subang Jaya
--Setia alam
--sunway lagoon

Japan (add the header here)
--tokyo
--osaka
--kyoto
--shinsabashi
--shinagawa

Answer 1

Presuming your json looks something like this

$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}
        ]
    }
]

this should work:

<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>

EDIT

demo: http://jsfiddle.net/jkrielaars/5wg9ejzg/