How to set the outer div values in html page - html

Question

I have an html page in Angularjs. In the page there are two divs one contains the data regarding total no of users and other div contains the table in which the data are populated from the service a list of user.
The code is.
app_user.html
// IN this div i am getting the total no of users by users.length
<div id ="total_user"> no of users {{users.length}} </div>
<div id ="user_table">
// In this the no of users keeps changing as soon filter is applied
<tr ng-repeat="row in users | filter : {status: search['_status']} | filter : {payment_type:search['pay_type']}| orderBy : orderBy:reverse ">
<td >
<div ng-if="row.status !== 'Failure'"><!--{{$index}} -->
<input type="checkbox" checklist-model="user.roles" checklist-value="row.id">
</div>
</td>
<td>
<a ng-href="https://userapp.com/{{row.id}}" target="_blank">{{row.username}}</a>
</td>
<td>
<div>
<div>{{row.location}}</div>
</div>
</td>
</div>
In the first div i am finding the total no of users and in the second div i am showing the list of user with details.
I have applied the filters which are working fine. Now what i want is when i apply the filter the No of user should also change for a particular filter applied. I am not getting the way of how to pass the row.length to the outer div.
For ex : before applying filters i have total no of user say 100, When i applied the filters the total no of users are now 40. Now in the first div i want to show the total no of user as 40 instead of 100.

Answer 1

Please use the below way to get the count.
ng-repeat="row in filteredusers = (users | filter:{status: search['_status']} | filter : {payment_type:search['pay_type']} | orderBy:reverse)"
Would create the filtered list on the fly, you can use filteredusers.length anywhere else in the current scope to show the count.
Filtered Count
{{filteredusers.length}}