<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="arrCtrl">
<span style="cursor: pointer;" ng-click="getLetter('a')">a</span>
<span style="cursor: pointer;" ng-click="getLetter('b')">b</span>
<span style="cursor: pointer;" ng-click="remo()">clear</span>
<input style="background-color: grey;" ng-model="query" >
<div ng-repeat="x in cars | filter:query">
{{ x }}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.cars = ["Aston Martin", "Audi", "Bentley", "BMW", "Bugatti"];
$scope.query = "";
$scope.getLetter = function(letter) {
$scope.query += letter ;
};
$scope.remo = function() {
$scope.query = $scope.query.slice(0, -1);
};
});
</script>
