Better way of doing this <tr> ng-repeat? - angularjs

Question

I am generating from the database a sidebar, based on types of books. For each type, I generate a tab to show listings of books in that type. It works well for other cases with less records, but I am getting a delay of some seconds in this case. Any ideas on how to improve performance of this?
Layout:
#* Sidebar *#
<div class="col-sm-3" ng-if="ShowSidebar" ngCloak>
<ul class="list-group sidebar-nav-v1" id="sidebar-nav">
#* Books *#
<li class="list-group-item list-toggle">
<a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse0">
<i class="fa fa-sort-alpha-asc"> </i> Books
</a>
<ul id="collapse0" class="collapse1 accordion-body collapse">
<li ng-repeat="bookTopic in ListBookTopics" style="text-align:justify">{{bookTopic.topic_en}}</li>
</ul>
</li> #* End of Books *#
#* Series *#
<li class="list-group-item list-toggle">
<a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse1">
<i class="fa fa-sort-alpha-asc"> </i> Series (Collections)
</a>
<ul id="collapse1" class="collapse">
<li ng-repeat="seriesTopic in ListSeriesTopics" style="text-align:justify">{{seriesTopic.topic_en}}</li>
</ul>
</li> #* End of Series *#
</ul>
</div> #* End of Sidebar v2*#
#* Main Area *#
<div class="col-sm-9" ng-if="ShowMainArea" ngCloak>
<div class="tab-v3">
<div class="tab-content">
#* Generate Books Tabs to list books by type *#
<div class="tab-pane fade in" id="{{booksTopic.id}}" ng-repeat="booksTopic in ListBookTopics" ng-cloak>
<div class="table-search-v1 panel panel-dark margin-bottom-50">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-book"></i> {{booksTopic.topic_en}} </h3>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search..." ng-model="searchParamBooksTopics">
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="center" rowspan="2">Title</th>
<th class="center" rowspan="2">Author</th>
<th class="center" rowspan="1">Number</th>
<th class="center" rowspan="1">Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in ListBooksInBooks | filter: { title: searchParamBooksTopics }" ng-if="row.title.length>1 && row.topics_id == booksTopic.id">
<td style="text-align:justify;"> {{row.title}}</td>
<td>{{row.author}}</td>
<td class="center">{{row.number}}</td>
<td class="center">{{row.topics_id}}</td>
</tr>
</tbody>
</table>
</div> #* End of table-responsive *#
</div> #* End of table-search-v1 panel panel-dark margin-bottom-50 *#
</div> #* End of Tab Content 1 - Books *#
</div> #* End of tab-content *#
</div> #* End of tab-v3 *#
</div> #* End of col-sm-9 - Main Area *#
Angular - Used Lists:
$scope.ListBookTopics = #Html.Raw( new JavaScriptSerializer().Serialize( Model.ListBookTopics ) )
$scope.ListBooksInBooks = #Html.Raw( new JavaScriptSerializer().Serialize( Model.ListBooksInBooks ) );
The line that is causing the delay is this one:
<tr ng-repeat="row in ListBooksInBooks | filter: { title: searchParamBooksTopics }" ng-if="row.title.length>1 && row.topics_id == booksTopic.id">
Any faster way of looping the list of books and getting all books of that type?