How to make search type dropdown using angular js?
<p>I have list of countries with state and country. This code is working with a cascading dropdown. How can I make a dropdown based on user input</p>

<p>Expectation:
When I click Country Dropdown one text box with list should come if user enter input based country list should come (like search).</p>

<p>I have added my code below</p>

<pre><code>angular.module('test', [])
    .controller('TestController', ['$scope', '$filter',

function ($scope, $filter) {
    $scope.country = "India";
    $scope.state = "Rajasthan";
    $scope.city = "Ajmer";

    $scope.countries = [{
        "name": "India",
            "states": [{
            "name": "Maharashtra",
                "cities": [{
                "name": "Pune"
            }, {
                "name": "Mumbai"
            }, {
                "name": "Nagpur"
            }, {
                "name": "Akola"
            }]
        }, {
            "name": "Madhya Pradesh",
                "cities": [{
                "name": "Indore"
            }, {
                "name": "Bhopal"
            }, {
                "name": "Jabalpur"
            }]
        }, {
            "name": "Rajasthan",
                "cities": [{
                "name": "Jaipur"
            }, {
                "name": "Ajmer"
            }, {
                "name": "Jodhpur"
            }]
        }]
    }, {
        "name": "USA",
            "states": [{
            "name": "Alabama",
                "cities": [{
                "name": "Montgomery"
            }, {
                "name": "Birmingham"
            }]
        }, {
            "name": "California",
                "cities": [{
                "name": "Sacramento"
            }, {
                "name": "Fremont"
            }]
        }, {
            "name": "Illinois",
                "cities": [{
                "name": "Springfield"
            }, {
                "name": "Chicago"
            }]
        }]
    }, {
        "name": "Australia",
            "states": [{
            "name": "NewSouthWales",
                "cities": [{
                "name": "Sydney"
            }]
        }, {
            "name": "Victoria",
                "cities": [{
                "name": "Melbourne"
            }]
        }]
    }];

    $scope.getStates = function () {
        $scope.states = null;
        $scope.cities = null;
        console.log($scope.country);
        if ($scope.country != null) {
            var filteredCountry = $filter("filter")($scope.countries, $scope.country);
            if (filteredCountry != null &amp;&amp; filteredCountry.length == 1) {
                $scope.states = filteredCountry[0].states;
            }
        }
    };

    $scope.getCity = function () {
        $scope.cities = null;
        if ($scope.state != null) {
            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null &amp;&amp; filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    };

    if ($scope.country != null) {
        var filteredCountry = $filter("filter")($scope.countries, $scope.country);
        if (filteredCountry != null &amp;&amp; filteredCountry.length == 1) {
            $scope.states = filteredCountry[0].states;

            var filteredState = $filter("filter")($scope.states, $scope.state);
            if (filteredState != null &amp;&amp; filteredState.length == 1) {
                $scope.cities = filteredState[0].cities;
            }
        }
    }

    $scope.alertCity = function () {
        alert('You selected ' + $scope.city);
    };
    //console.log($scope.countries);
}]);
</code></pre>

<p>html</p>

<pre><code>&lt;div ng-app="test"&gt;
    &lt;div ng-controller="TestController"&gt;
        &lt;div&gt;Country:
            &lt;select ng-model="country" ng-options="country.name as country.name for country in countries" ng-change="getStates()"&gt;
                &lt;option value=''&gt;Select&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div&gt;States:
            &lt;select id="state" ng-disabled="!country" ng-model="state" ng-options="state.name as state.name for state in states" ng-change="getCity()"&gt;
                &lt;option value=''&gt;Select&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
        &lt;div&gt;City:
            &lt;select id="city" ng-disabled="!country || !state" ng-model="city" ng-options="city.name as city.name for city in cities" ng-change="alertCity()"&gt;
                &lt;option value=''&gt;Select&lt;/option&gt;
            &lt;/select&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/U3pVM/21347/" rel="nofollow">mydemo</a>
I want to introduce a filter for every dropdown.</p>