Currently, I am experimenting with a codepen to understand how to filter data based on a clicked span element. The table is where the data is displayed and I'm looking for a way to trigger filtering outside of it. While the angularjs documentation specifies using filters with ng-repeat, I am unsure about implementing the filtration process when a specific span element is clicked. Can anyone guide me on how to proceed? I have an openModal function that works when a button is clicked but doesn't affect the display of the data. Thank you for any assistance.
HTML
<div class="container" ng-app="myApp" ng-controller="myController">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-6 my-auto">
<span>All</span>
<span>Hawks</span>
<span>Sparrows</span>
<span>Doves</span>
</div>
<div class="col-6 my-auto">
<label class="my-auto float-right">Search:
<input ng-model="searchText">
</label>
</div>
</div>
<div class="row table-responsive">
<table id="searchTextResults" class="table table-striped">
<tr>
<th ng-click="sortBy('ID')">ID</th>
<th ng-click="sortBy('Name')">Bird Name</th>
<th ng-click="sortBy('Type')">Type of Bird</th>
</tr>
<tr>
<tr ng-repeat="birds in list | filter:searchText | orderBy:sortField:reverseOrder">
<td><a href="#">{{birds.ID}}</a></td>
<td><a href="#">{{birds.Name}}</a></td>
<td><a href="#">{{birds.Type}}</a></td>
<td><button ng-click="openModal()" class="myBtn">Edit</button></td>
</tr>
</tr>
</table>
</div>
</div>
</div>
</div>