Create select with otpgroup based on two different data

Question

Hi Friends here two data in one JSON file where I need to create Select option based on country field and show data based on location field

"countries": [
        {
            "id": "75",
            "country": "France"
        },
        {
            "id": "82",
            "country": "Germany"
        },
        {
            "id": "208",
            "country": "Switzerland"
        },
        {
            "id": "226",
            "country": "United Kingdom"
        },
        {
            "id": "227",
            "country": "United States"
        }
    ],
    location": [
        {
            "id": "49",
            "name": "Aberdeen",
            "country_id": "226",
            "country": "United Kingdom"
        },
        {
            "id": "52",
            "name": "All Cities",
            "country_id": "226",
            "country": "United Kingdom"
        },
        {
            "id": "51",
            "name": "All Cities",
            "country_id": "82",
            "country": "Germany"
        },
        {
            "id": "50",
            "name": "All Cities",
            "country_id": "227",
            "country": "United States"
        }
        {
            "id": "31",
            "name": "San Jose",
            "country_id": "227",
            "country": "United States"
        },
        {
            "id": "42",
            "name": "Seattle",
            "country_id": "227",
            "country": "United States"
        },
        {
            "id": "18",
            "name": "Stuttgart",
            "country_id": "82",
            "country": "Germany"
        },
        {
            "id": "41",
            "name": "Washington DC",
            "country_id": "227",
            "country": "United States"
        }
    ],

HTML File

 <select ng-model="location">
                <optgroup ng-repeat="data in location"  label="{{data.country}}">
                    <option ng-repeat="item in data" value="{{data.country}}::{{item.name}}">{{item.name}}</option>
                </optgroup>
  </select>

I need to show my data look like :

I try above code but I don't get success. Please Help

Answer 1

No need to use a different array you can also do it by using only location array as follow

 <select ng-model="location" ng-options="option.name as option.name group by option.country for option in locations"></select>

Check this working example