I'm currently working on an angular.js project where I have a dynamic table displaying study results. I want to enhance this by allowing users to view more detailed data about each specific study when they click on the corresponding row in the table. Here is a snippet of the table structure I have implemented so far. I believe that utilizing ngOptions or ngSelect might be necessary for achieving this functionality, but I am open to suggestions and guidance from experienced developers. Your assistance would be highly valuable.
<table class="table table-condensed table-hover">
<thead>
<tr>
<td class="center" id="table-header">Date</td>
<td class="center" id="table-header">Study</td>
<td class="center" id="table-header">Sample</td>
<td class="center" id="table-header">File</td>
<td class="center" id="table-header">Big Data</td>
<td class="center" id="table-header">Action</td>
</tr>
</thead>
<tbody ng-repeat="study in studies | filter: filter_name">
<tr>
<td class="center">{{ study.created_at }}</td>
<td class="center">{{ study.study }}</td>
<td class="center">{{ study.sample }}</td>
<td class="center">{{ study.fastq }}</td>
<td class="center">{{ study.bigData }}</td>
<td class="center">
<div class="dropdown center">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li id="list-item">Continue</li>
<li id="list-item" data-toggle="modal" data-target="#more-metadata-modal">More Data</li>
<li id="list-item" data-toggle="modal" data-target="#edit-metadata-modal">Edit</li>
<li id="list-item" data-toggle="modal" data-target="#delete-metadata-modal">Delete</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>