Remove empty option from X-editable Select

Question

I am working with AngularJS and X-editable from past few weeks and one thing which is bothering me is that select option provides a empty option as first child.
Here's the HTML

<span editable-select="curuser.roles" e-name="roles" e-ng-options="role as role.name for role in roles">
{{ showRoles() }}
</span>  

Here is output HTML :

<select name="roles" ng-options="role as role.name for role in roles">
   <option value="?" selected="selected"></option>
   <option value="0">Admin</option>
   <option value="1">Company</option>
   <option value="2">Manager</option>
</select>  

What do I need to do to get rid of this empty option?
Here is working JSFiddle

Answer 1

You have not picked an answer so I thought I would submit the fiddle that I got to work for others that have similar problems. I updated your editable-select and your e-ng-options. Here is the updated fiddle http://jsfiddle.net/7e7kk/22/

  editable-select="roles[0].value" 
  ng-options="role.value as role.name for role in roles"

Answer 2

This is the normal behaviour. I have updated your jsfiddle to add a standard select element with ngOptions and as you can see there will be a blank value unless 1 of the options is selected: https://jsfiddle.net/vw4mkbou/2/

You need to either set the default value to 1 of the available options or have an empty state: http://jsfiddle.net/vw4mkbou/4/

Answer 3

Change your code from:

e-ng-options = "role as role.name for role in roles"

to

e-ng-options="role.id as role.name for role in roles track by role.id"

And in the controller, add $scope.apply.

And of course, in your controller, set the default value of newly added rows to be roles[0].

Sorry, if this is too late. I've just seen your question.