"Contains" search for a sub-element of an object array - angularjs

Question

Here's my data:
[
{profile: {name: "Test123"}}
]
I have a text input, like so:
<input ng-model="searchText">
I'm trying to do a search on profile.name using the textbox input.
I've tried making a custom filter, like so:
$scope.searchFilter = function(value){
return value.profile.name.indexOf($scope.searchText) != -1;
};
Then filtering like so:
<tr ng-repeat="profile in profiles | filter: searchFilter"></tr>
It seems unfortunately that this works fine on the initial search, but when entering text into the textbox the filter is not re-evaluated.
How can I force Angular to re-check the filter when I enter text into the search box, or is there a better way to do this?

Answer 1

You don't need to create a function to search. Just change your html into this:
<input ng-model="searchText.profile.name" />
...
<tr ng-repeat="data in profiles | filter: searchText">{{data.profile.name}}</tr>
In your controller:
$scope.searchText = { profile: {name:""}}; //should be the same data struct with your search target.
$scope.profiles = [
{profile: {name: "Someone"}},
{profile: {name: "Luky"}},
{profile: {name: "John"}},
{profile: {name: "Mary"}},
{profile: {name: "Howard"}},
{profile: {name: "Sheldon"}}
]
Then it works. Here is jsfiddle. : )
And here is filter document.