smart-table page not reset to 1 on collection refresh - angularjs

Question

I have setup the smart-grid as per the documentation and everything is working fine. I am adding a new record in a modal dialog and on successful add of new record, I would like to refresh the smart-grid. I understand from the documentation that I just need to refresh the collection as I am using st-safe-src attrubute.
My issue is, Suppose, I am displaying 17 records and I am on page 2 now, and now I open the modal to add new record and close it after successfull addition, I am resetting the collection. But in this scenario, the page remains in page 2 only, and not getting reset to page 1. How to do that?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table st-table="displayedCollection" st-pipe="getMasterJobs" st-safe-src="rowCollection" class="table table-condensed table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody ng-show="!isDataLoading">
<tr ng-repeat="row in displayedCollection">
<td>{{row.name}}</td>
<td>{{row.description}}</td>
<td>
<button type="button" ng-click="editRow(row)" class="btn btn-xs btn-info">
<i class="fa fa-edit"></i> Edit
</button>
</td>
</tr>
</tbody>
<tbody ng-show="isDataLoading">
<tr>
<td colspan="3" class="text-center">Loading...</div>
</td>
</tr>
</tbody>
<tfoot ng-hide="isDataLoading">
<tr>
<td class="text-center" st-pagination="" st-items-by-page="10" st-displayed-pages="displayedPages" colspan="4"></td>
</tr>
</tfoot>
</table>
I have this in my controller.js file:
$scope.rowCollection = [];
$scope.isDataLoading = false;
//copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches)
$scope.displayedCollection = [].concat($scope.rowCollection);
$scope.getMasterJobs = function(tableState) {
console.log(tableState);
var start = 0;
var length = 10;
var pagination = tableState.pagination;
start = pagination.start || 0; // This is NOT the page number, but the index of item in the list that you want to use to display the table.
length = pagination.number || 10; // Number of entries showed per page.
$scope.isDataLoading = true;
AdminJobMasterService.getMasterJobs(start, length).success(function(response, status, headers, config) {
$scope.rowCollection = response.data;
$scope.displayedCollection = [].concat($scope.rowCollection);
//set the number of pages so the pagination can update
tableState.pagination.numberOfPages = response.numberOfPages;
$scope.displayedPages = Math.ceil(response.numberOfPages / length);
$scope.isDataLoading = false;
}).error(function(data, status, headers, config) {
console.error(data);
$scope.isDataLoading = false;
});
};
Now, I call a different controller when I click the new/edit button and on click of close on the modal, I trigger the event and handle that event in the above controller. Please see that, I am resetting the collection observed by smart-table and also, tried initializing the tableState variable. Without tableState
variable, I cannot call getMasterJobs() as tableState.pagination will be null.
$scope.$on('new-job-added', function(event, data) {
$log.info("Time to refresh!");
$scope.rowCollection = [];
$scope.displayedCollection = [].concat($scope.rowCollection);
var tableState = {
sort: {},
search: {},
pagination: {
start: 0
}
};
$scope.getMasterJobs(tableState);
});