AngularJS drop down 2 level deep

Question

Following are returned Json data from server:

 $scope.cities = response.data;

is:

0: {id: 1, name: "Malaysia",…}
    city: [{id: 1, country_id: 1, city: "Kuala Lumpur"}, {id: 2, country_id: 1, city: "Selangor"},…]
        0: {id: 1, country_id: 1, city: "Kuala Lumpur"}
          city: "Kuala Lumpur"
          country_id: 1
          id: 1
        1: {id: 2, country_id: 1, city: "Selangor"}
          city: "Selangor"
          country_id: 1
          id: 2
   id: 1
   name: "Malaysia"
1: {id: 2, name: "Singapore", city: [{id: 11, country_id: 2, city: "Singapore"}]}
   city: [{id: 11, country_id: 2, city: "Singapore"}]
   id: 2
   name: "Singapore"

and in my views

<ui-select ng-model="cities.selected" theme="bootstrap">
    <ui-select-match placeholder="Select City">
            {{$select.selected.name}}
    </ui-select-match>
    <ui-select-choices repeat="item in cities | filter: $select.search">
        <div ng-bind-html="item.city.city | highlight: $select.search"</div>
    </ui-select-choices>
</ui-select>

But I cant render the following way of drop down:

-Malaysia
  - Kuala Lumpur
  - Selangor
-Singapore
  -Singapore

Thanks!!

Answer 1

Try this. Use nested ng-repeat and bind it in li tag.

<ui-select-choices repeat="item in cities | filter: $select.search">
        <div ng-bind-html="item.city.city | highlight: $select.search"</div>
<li ng-repeat="data in item.city">
{{data.city}}
</li>
    </ui-select-choices>

Answer 2

try this

 <ui-select ng-model="cities.selected" theme="bootstrap">
        <ui-select-match placeholder="Select City">
                {{$select.selected.name}}
        </ui-select-match>
        <ui-select-choices ng-repeat="item in cities | filter: $select.search">
      <div ng-bind-html="item.name| highlight: $select.search"</div>
            <li ng-repeat="data in item.city">
           {{data.city}}
         </li>
        </ui-select-choices>
    </ui-select>