how to use typeahead with smarttable? - angularjs

Question

I have created a smarttable combined with a typeahead functionality:
<input type="text" class="form-control" ng-click="selectPerson()" ng-model="selectedPerson"
bs-options="person.firstName for person in rowCollection" placeholder="Search for person" bs-typeahead>
<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance">balance</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate}}</td>
<td>{{row.balance}}</td>
<td>
<button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
</table>
The goal is to search for a person in the table in the search input ,select the name and then display in the smarttable below it. When I select a person this fires:
$scope.selectPerson = function(){
$scope.displayedCollection = $scope.selectedPerson;
console.log($scope.displayedCollection );
}
It does not display the person in the table however. How can I fix it so it displays the person?
plunkr:http://plnkr.co/edit/NXEbl5?p=preview