JSFiddle - React, Tailwind, and code Playground

HTML

<div data-ng-app="market">
    <div data-ng-controller="SomeController">
        <table>
            <tr data-ng-repeat="f in fish">
                <td data-ng-bind="f.name"></td>
                <td><a href="#" data-ng-click="showdetails(f.id)">Details</a></td>
            </tr>
            <tr>
                <td>Fail case</td>
                <td><a href="#" data-ng-click="showdetails(-1)">Details</a></td>
            </tr>
        </table>
        
        <div data-ng-bind="selected">
                        
        </div>
    </div>    
</div>

JavaScript

var app = angular.module('market', []);

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]
     
     $scope.showdetails = function(fish_id) {
         var found = $filter('filter')($scope.fish, {id: fish_id}, true);
         console.log(found);
         if (found.length) {
             $scope.selected = JSON.stringify(found[0]);
         } else {
             $scope.selected = 'Not found';
         }
     }
           
}]);