How to fix this error in angularjs autocomplete "iElement.autocomplete is not a function"

Question

I have to implement an auto completion for country drop down.I am using angularjs 1.4 version.

I referred this website click here for implementing this auto completion.

but its showing this error " iElement.autocomplete is not a function" while implementing the above code.Is there any js file I have to include

here is my html code

<div ng-app='MyModule'>
    <div ng-controller='DefaultCtrl'>
        <input auto-complete ui-items="countries" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

js file

 var app = angular.module('MyModule', []);

    app.controller('DefaultCtrl', function($scope) 
    {
     $scope.countries = [ 
        {name: 'Afghanistan', code: 'AF'},
        {name: 'Antigua and Barbuda', code: 'AG'},
        {name: 'Bahamas', code: 'BS'},
        {name: 'Cambodia', code: 'KH'},
        {name: 'Cape Verde', code: 'CV'}];
    });


    app.directive('autoComplete', function($timeout) {
        return function(scope, iElement, iAttrs) {
                iElement.autocomplete({
                    source: scope[iAttrs.uiItems],
                    select: function() {
                        $timeout(function() {
                          iElement.trigger('input');
                        }, 0);
                    }
               });
        };
    });

thank you in advance

Answer 1

The example you are referring to seems to be old (angular 1.0.0) and I'm not sure if this should be working with the current 1.5. Anyway I would suggest you to take a look at the Typeahead directive from Angular-UI. There's also an example as plunker that you could edit to fit your needs.

Here is a working example using your data.

HTML:

<div ng-controller="MainCtrl">
    <h4>Custom templates for results</h4>
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" uib-typeahead="country as country.name for country in countries | filter:{name:$viewValue}" class="form-control" typeahead-show-hint="true" typeahead-min-length="0">
</div>

JS:

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('MainCtrl', function($scope, $http) {
    //ngModel value
    $scope.selected = undefined;
    //lookup values
    $scope.countries = [ 
      {name: 'Afghanistan', code: 'AF'},
      {name: 'Antigua and Barbuda', code: 'AG'},
      {name: 'Bahamas', code: 'BS'},
      {name: 'Cambodia', code: 'KH'},
      {name: 'Cape Verde', code: 'CV'}
    ];
  });