how to dynamically add $scope in Angular

how to dynamically add $scope in Angular

here is my HTML:
...
<table class="tickerTable">
<thead>
<th class="first">Symbol</th>
<th>Accts</th>
<th>Shares Bought</th>
<th>Shares Sold</th>
<th>Shares Own</th>
<th>Case Filed</th>
<th>Est. Losses</th>
<th>Case Status</th>
</thead>
<tbody ng-repeat="ticker in tickers | orderBy:'Status':true | filter:search">
<tr class="{{ticker.Status | status}}" ng-click="showTrades(ticker)">
<td class=" left link">{{ticker.Ticker}}</td>
<td class="middle link">{{ticker.TradeCount}}</td>
<td>{{ticker.TotalBought | number:2}}</td>
<td>{{ticker.TotalSold | number:2}}</td>
<td>{{ticker.TotalSharesNow | number:2}}</td>
<td>{{ticker.DateFiled}}</td>
<td>{{ticker.EstimatedLosses | currency}}</td>
<td class="link">{{ticker.Status | status}}</td>
</tr>
<tr ng-show="currentItem == ticker">
<td colspan="8">{{trades}}<div ng-include="loadTrades == ticker"></div>
</div></td>
</tr>
</tbody>
</table>
here is the controller:
$scope.showTrades = function(ticker){
var i = ticker.TickerID+ticker.AlertID;
$scope.trades = null;
$scope.currentItem = ticker;
return $scope.trades = Trades.query({SHFUserID:ticker.SHFUserID,
TickerID:ticker.TickerID, AlertID:ticker.AlertID});
};
the table is populated with many rows. then for each row i add a blank row
that is hidden by default. when the row is clicked the hidden row is
displayed and the $scope.trades is loaded and {{trades}} displays the
data. The problem is that since I am dynamically generating the empty TR
rows based on how many "ticker in Tickers" the {{trades}} data is
populated in each of them. even thought the data is hidden this is not the
desired result. I only want to load the {{trades}} data into the visible
TR exposed by ng-show.