JHipster autocomplete combobox

entity-dialog.controller.js

$scope.loadOtherEntities = function(searchQuery) {
    if (searchQuery){
        OtherEntitySearch.query({query: '*' + searchQuery + '*'}, function(result) {
            $scope.otherEntities = result;
        }, function(response) {
            if(response.status === 404) {
                $scope.otherEntities = OtherEntity.query({isActive: true});
            }
        });
    } else {
        $scope.otherEntities = OtherEntity.query({isActive: true});
    }
};

entity-dialog.html

<div class="form-group">
    <label class="control-label" translate="jhApp.entity.otherEntity">otherEntity</label>
    <ui-select reset-search-input="false" ng-model="entity.otherEntity">
        <ui-select-match allow-clear="true">
            <span ng-bind="$select.selected.name"></span>
        </ui-select-match>
        <ui-select-choices refresh="loadOtherEntities($select.search)" refresh-delay="200"
                           repeat="item in (otherEntities) track by item.id">
            <span ng-bind="item.name"></span>
        </ui-select-choices>
    </ui-select>
</div>

@geraldhumphries Thanks for your response. I will try it and let you know.

The requirement changed due to the complexity. Now they asked me to filter the pre populated results based on the query parameter that is selected on the top drop down.

Here is how it looks

The requirement is when the user selects the country 'US' I have to show only the states in 'US' in the States drop down. Please let me know if you have any sample projects in this scenario using Jhipster.

Thank you!