AngularJS <datalist> giving weird options

Question

I'm trying to convert this:

<td class="col-md-2">
<select style="max-width:120px" 
        ng-model="row.gaProfileId" 
        ng-repeat="profile.id as weGaAdminCtrl.showProfile(profile) for profile in weGaAdminCtrl.profiles"
        ng-change="weGaAdminCtrl.assignBrandToProfile(row)">
        </select>
</td>

into something like this:

<td class="col-md-2">
      <input type="text" list="datalist">
      <datalist id="datalist">
        <select style="max-width:120px;" 
                ng-model='row.gaProfileId' 
                ng-options='profile.id as weGaAdminCtrl.showProfile(profile) for profile in weGaAdminCtrl.profiles'
                ng-change="weGaAdminCtrl.assignBrandToProfile(row)">
        </select>
      </datalist>
</td>

What I get is this: Datalist preview

Now what I don't get is how it gives me "string:###". Does anyone know how I can alter this?

Answer 1

html :

<div ng-controller="MyCtrl">

   <input list="trees" name ="trees">
<datalist id="trees">
//<select> is optional 
  <option ng-repeat="tree in trees" value="{{tree.name}}">{{tree.name}}</option>
//</select>
</datalist>


</div>

js :

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.trees = [
  {'name':'oak'},
  {'name':'ash'},
  {'name':'fir'}
];
}

To fire ng-change from datalist in Angular 1.x read Input with Datalist - ng-change is not fired in IE for AngularJS and https://github.com/angular-ui/bootstrap/issues/3036

And because of styling datalist and select see Is it possible to style the drop-down suggestions when using HTML5 <datalist>?