title: Implememting autolookup in angularJS
body: <p>I have a json object in my hand, and three textbox in a row. when I enter something on first textbox, and if it matches any data I have in my object I want to fill the remaining two textboxes with the corresponding row. I want only one row data to be shown, most matching row I have in my search result rest can be ignored. I have tried many ways to achieve this but all failed.
  My HTML is like this</p>
  
  <pre><code>    &lt;body ng-app="myApp" ng-controller="MainCtrl"&gt;
      &lt;div&gt;
          &lt;div ng-repeat="friendObj in friends  | filter:search:strict  | limitTo:1"&gt;
              &lt;input ng-model="search.name" /&gt;
              &lt;input ng-model="friendObj.name" /&gt;
              &lt;input ng-model="friendObj.phone" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Note</strong> : I won't be able to change My HTML structure at any condition.</p>
  
  <pre><code>My JS Code
  
  
      angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
      $scope.friends = [{
          name: 'John',
          phone: '555-1276'
      }, {
          name: 'Mary',
          phone: '800-BIG-MARY'
      }, {
          name: 'Mike',
          phone: '555-4321'
      }, {
          name: 'Adam',
          phone: '555-5678'
      }, {
          name: 'Julie',
          phone: '555-8765'
      }, {
          name: 'Juliette',
          phone: '555-5678'
      }];
  
  }]);
  </code></pre>
  
  <p>I don't think I have reached anywhere at my objective. I am confused is ng-repeat and filter itself is the right tools for this job? Can any one point out the correct way to achieve this?</p>
  
  <p><a href="http://jsfiddle.net/v2xqmkwx/11/" rel="nofollow">http://jsfiddle.net/v2xqmkwx/11/</a></p>