Implement autosuggest using custom directive in angularjs

I tried to implement custom directive and display in unordered list but the array which is supposed to hold the filtered names from couldn't do so. Here is my directive I need to filter the input data and get all the matching names from my main array

app.directive('autoComplete', function() {


function link(scope, iElement, iAttrs,modelCtrl) {

        //click event handling
                scope.fillTextbox = function(name){ 
                    // modelCtrl.$setViewValue(name);
                    // scope.filtered = scope[iAttrs.uiItems].filter(function(item){
          //        return item.includes(inputValue);
          //    });
                }

                iElement.bind("keydown", function (event) {



                            if(!scope.filtered.length){
                                return;
                            }

                        if(event.which == 38){                      //keyup
                            if(scope.focusIndex > 0){
                                scope.$apply(function (){
                                    scope.focusIndex-= 1;
                                    scope.selected = scope.filtered[scope.focusIndex]; ////

                                });

                            }else{event.preventDefault();}
                            return;
                        }else if(event.which == 40){                        //keydown
                            if(scope.focusIndex < scope.filtered.length-1){
                                scope.$apply(function (){
                                    scope.focusIndex+=1;
                                    scope.selected = scope.filtered[scope.focusIndex]; ///

                                });

                            }else{event.preventDefault();}
                        }
                        else if(event.which == 13){                     //enter

                            scope.$apply(function (){
                                scope.selected = scope.filtered[scope.focusIndex];
                                console.log(scope.filtered[scope.focusIndex]);
                                scope.focusIndex = 0;
                                scope.filtered = [];
                            });
                        }


                });








        }
return {
    restrict: 'A',
    template :'<ul ng-model="listofnames" ng-show="true"><li  class="list-group-item" ng-repeat="name in filtered" ng-click="fillTextbox(name)"></li></ul>',
    require: 'ngModel',
    scope : {filtered : '='},
    link : link
}

});

Here is my controller. The changeInText() function doesn't work and the names are not getting filtered from the names array.

app.controller("DefaultCtrl",["$scope" , function($scope){
$scope.names = ["john", "john1", "john2", "john3", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew",
 "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert",
  "edouard", "benoit", "guillaume", "joseph"];
$scope.foundname = [];
$scope.filtered = [];
$scope.focusIndex = 0;

$scope.changeInText = function (){

                for(var i = 0; i< $scope.names.length ; i++){
                    if($scope.names[i].includes($scope.selected)){
                        $scope.filtered.push($scope.names[i]);
                    }

                }
                console.log($scope.filtered);
                $scope.filtered=[];                 
}

}]);