title: Limit Angular UI-Bootstrap Typeahead to specific object property
body: <p>I have the following <a href="http://angularjs.org/" rel="noreferrer">Angular</a> <a href="http://angular-ui.github.io/bootstrap/" rel="noreferrer">UI-Bootstrap</a> <a href="http://angular-ui.github.io/bootstrap/#/typeahead" rel="noreferrer">typeahead</a> working great:</p>
  
  <pre><code>&lt;input class="span2" type="text" ng-model="selectedStuff" typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue"/&gt;
  </code></pre>
  
  <p>Though, it's almost working <em>too</em> great. I'm able to display the <code>stuffs.name</code> for the purposes of the <code>typeahead</code> AND select the full <code>stuff</code> object in <code>stuffs</code>. The problem is that my <code>$viewValue</code> is matching all of the properties in <code>stuff</code> instead of just the <code>stuff.name</code>. I've tried adding the <code>.name</code> to various places in the <code>typeahead</code> with no luck. Is there a straightforward way to display and match only the <code>.name</code> but still return the entire object?</p>