How to work with select input with data coming from a simple relational db model - forms

Question

I'm using Angularjs plugged into a API which retrieves data from a mysqlk normal relational db.
Let's say I have this simple data model in my bdd:
table car:
id,
type_id
table type:
id,
label
I have a API which retrieves the data from DB to have the list of cars and the static labels from db:
http://myapi/car/
response :
{[{id:1, type_id:2}, {id:2, type_id:3}]}
http://myapi/carstaticlabel/
response :
{[{id:1, label:convertible}, {id:2, label:limousine}, {id:3, label:pickup}]}
My aim is first to display a list of cars with the type label and then, open a dialog and being able to show a form with preloaded values of the selected car:
rendered list of cars :
1 convertible
2 pickup
rendered form for edited car whose id is 1:
select the type of car:
<select>
<option value="1">convertible</option>
<option value="2" selected="selected">limousine</option>
<option value="3">pickup</option>
</select>
I have tried different approaches but none is elegant
Solution 1
for the list of cars
change my API and make the join directly between car and type to get the list with label:
http://myapi/car/
response :
{[{id:1, type_id:2, type:{[id:2, label:limousine]}}, {id:2, type_id:3, type:{[id:3, label:pickup]}}]}
then I just assign in the form : car.id and car['type']['label']
ISSUE: each car will contain repeated information (label) >> bloated info
for the edit form:
I pass the json of selected car to the form and set default values:
<p>type: <select ng-model="car.type" ng-options="type.label for type in type_list" required></select></p>
MY ISSUE with that:
when I submit the form, I don't get the type_id directly, I get the car.type object instead, so I need to painfully translate it into an id to post into the database.
To convert I have to go into the car.type object and retrieve the object inside and then retrieve its id... very unelegant.
Solution 2
make the "join" inside angular by working with arrays.
ISSUE: very hard to default values in the form later on
I'm lost, what is usually the best practice to achieve that simple task?

Answer 1

You should use select as label for value in array syntax for array data sources. Your example have complex data structure which is array of objects. So you need something like this:
<select ng-model="selectedId"
ng-options="x.id as x.label for x in response">
</select>
I created little example here to demonstrate proposed solution.