Angular custom basic input filter does not work properly, displays only the first instance of the match

Question

I am writing a custom directive for the input field, when you start typing, it will display a filtered list that will correspond to what you type:

angular.module('plunker', [])
.controller('AnimateCtlr', function($scope){
  $scope.data = ['apple', 'orange', 'banana', 'grapes', 'lemon', 'strawberry'];
    $scope.filteredData = [];
})
.directive('basicInputFilter', function($filter){
  var linker = function (scope, element, attrs) {


        element.on('input', function(event, combo, selection){
             var expression = $(this).text();
             expression = scope.filter;
             console.log(expression);
             scope.$apply(function(){

                scope.filteredData = $filter('filter')(scope.data, expression);
             });
        });
    };

    return {
        restrict: 'A',
        link: linker,
        scope: {
            data:'=',
            filteredData:'=',
            filter: '='
        }
    };
});

From what I noticed, it will show only one instance of the match, and not the entire possible result of the match, and will not show the result if the match is not the first letter. What could be wrong here?

Plunker: http://plnkr.co/edit/REDJywQljTmtv2d3ZnD2?p=preview

Answer 1

Angular, , datalist.

, , , Chrome, Opera IE " ", Firefox "".

, , $filter , , , .

datalist , , .