Making a typeahead with angularJS

Question

I currently use AngularJS and Bootstrap. I want to make a typeahead which show all options when he is selected (when I click on it) not only when I wrote somthing on it. like the example on this site which use JQuery (I can't use JQuery).

here is my controller

countrycatControllers.controller('CountryListCtrl',['$scope',
    function ($scope) {
        $scope.listCountry = [
        {"name": "Switzerland"},
        {"name": "France"},
        {"name": "Spain"},
        {"name": "Brazil"},
        {"name": "Argentina"},
        {"name": "USA"},
        {"name": "Canada"},
        {"name": "China"},
        {"name": "Germany"},
        {"name": "Italy"}
        ];
    }
])

and here is my HTML input :

<pre>Model: {{country | json}}</pre>
<input data-ng-model="country" typeahead="item.name for item in listCountry | filter:$viewValue"/>

Answer 1

There is an 100% angular directive for the Select2 plugin.

Check out https://github.com/angular-ui/ui-select