JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app='A' ng-controller='B'>
<input type="search" placeholder="Search" ng-model="stationSearch">
<button class="button" ng-click="setStation(bn.name)" ng-repeat="bn in itemsList | filter:stationSearch">{{bn.name}}</button>
</div>
CSS
input, button{
text-align: left;
display:block;
width: 200px;
}
JavaScript
angular.module('A', []).controller('B', function ($scope) {
$scope.stationSearch = '';
$scope.setStation = function (bnn) {
$scope.stationSearch = '';
$scope.stationSearch = bnn;
};
$scope.itemsList = [{
'name': 'Iapetos Baltazar',
'amount': 1
}, {
'name': 'Mordred Maui',
'amount': 4
}, {
'name': 'Verethragna Tane',
'amount': 20
}, {
'name': 'Arawn Lir',
'amount': 7
}, {
'name': 'Cepheus Zephyrus',
'amount': 15
}, {
'name': 'Leander Pallas',
'amount': 9
}, {
'name': 'Chryses Vohu Manah',
'amount': 13
}, {
'name': 'Nuadha Lycus',
'amount': 19
}];
})