How can I pluck out filter results?
<p>I want to be able to pull out the <strong><em>best</em></strong> value from a filtered list of results, this is my test page:</p>

<p><a href="http://plnkr.co/edit/MCLTKUGpIyuYYjv7DLFM?p=preview" rel="nofollow">http://plnkr.co/edit/MCLTKUGpIyuYYjv7DLFM?p=preview</a></p>

<p>Template</p>

<pre><code>&lt;div ng-controller="repeatController"&gt;
  &lt;input type="search" ng-model="q" placeholder="filter results..." /&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="friend in friends | filter:q as results"&gt;
      [{{$index + 1}}] {{friend.names[0]}}
    &lt;/li&gt;
    &lt;li ng-if="results.length == 0"&gt;
      &lt;strong&gt;No results found...&lt;/strong&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Controller</p>

<pre><code>var app = angular.module('app', []);
app.controller('repeatController', function($scope) {
  $scope.friends = [
    {names:['David King', 'Davey', 'oodavid', 'Queenie']},
    {names:['Paul King', 'Pablo', 'The Iron Paul']},
    {names:['Michael P O\'Keefe', 'Miguel Vennie']},
    {names:['James Griffiths', 'The Kraken', 'Thee Krakken']},
    {names:['Queen Elizabeth', 'The Queen']}
  ];
});
</code></pre>

<p>When I type "the" into the search box I see that these people have "the" in one of their names (which is the correct list)...</p>

<ul>
<li>Paul King</li>
<li>James Griffiths</li>
<li>Queen Elizabeth</li>
</ul>

<p>...however, I want to pluck out the best match from the names array instead of just using the <strong><em>first</em></strong> value, so it should render like this:</p>

<ul>
<li>The Iron Paul</li>
<li>The Kraken</li>
<li>The Queen</li>
</ul>

<p>Any pointers?</p>