angularjs - How to bind object to ng-model in datalist selected option ng-repeat -

in text box want show customer name per user enter key if user enter letter customer name starting letter display in search box.for using "data-list"

but problem if writing option value="customer.name" display customer names in text box per requirement @ same time bind customer name ng-model.

i want customer object bind ng-model

<div ng-app="myapp" ng-controller="myctrl">  <div class="form-group">                         <label class="control-label">customer name :</label>                          <input list="browsers" name="browser" ng-model="selectedcustomer" >                          <datalist id="browsers">                             <option ng-repeat="customer in customers"                                   value="{{customer.name}}" >{{customer.name}}                                 </option>                         </datalist>                     </div>  </div> 

by writing option value="{{customer}}" bind selected customer ng-model @ same time show customer object in text box don't want want customer name display in text box

var app = angular.module('myapp', []); app.controller('myctrl', function($scope) { $scope.customers=[{id :1,name :'mahesh',city:'pune',state:'maharashtra'},                   {id :2,name:'mayur',city:'surat',state:'gujrat'},                   {id :3,name:'ram',city:'mumbai',state:'maharashtra'}]; }); 

there nice component angular material called md-autocomplete. if use component, make you're live easier.

here link component : auto-complete api , here link demos