smart-table st-sort only sorting half - html

Question

I am using smart-table to display a table of employee names, extensions, etc. My data loads fine, but when I try and sort using st-sort it only sorts the top half of the rows. Always half, always the top.
Here's the html code snippet with the table:
<div class="col8" ng-controller="employeeCtrl">
<table st-table="employeesCollection" st-safe-src="employeesCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName" st-skip-natural="true">First Name</th>
<th st-sort="lastName" st-skip-natural="true">Last Name</th>
<th st-sort="extension" st-skip-natural="true">Extension</th>
<th st-sort="city" st-skip-natural="true">Store City</th>
<th st-sort="number" st-skip-natural="true">Store Number</th>
</tr>
<tr>
<td>
<input type="text" id="FirstName" size="10" ng-keyup="searchEmp()" /></td>
<td>
<input type="text" id="LastName" size="10" ng-keyup="searchEmp()" /></td>
<td>
<input type="text" id="Extension" size="10" ng-keyup="searchEmp()" /></td>
<td>
<select id="store" onchange="searchEmp()">
<option value=''>Select City</option>
<% For Each city In cityList%>
<option value="<%=city%>"><%=city%></option>
<% Next%>
</select></td>
<td>
<select id="storeNo" onchange="searchEmp()">
<option value=''>Select Store</option>
<% For Each store In storeList%>
<option value="<%=store%>"><%=store%></option>
<% Next%>
</select>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employeesCollection">
<td ng-repeat="col in employee track by $index">{{col}}</td>
</tr>
</tbody>
</table>
</div>
Anybody got any ideas?

Answer 1

One thing I am noticing, and it may be the issue, is that you are using the same collection in the st-table directive and st-safe-src directive. If you are working with async data, you need to set as in documentation:
st-table="displayedCollection" st-safe-src="rowCollection"
And in your controller:
$scope.displayedCollection = [].concat($scope.rowCollection);