Adding selected="selected" to an option field with Angular.JS

Question

I have a scope object which contains possible Ratings that are selected via a dropdown:

$scope.ratings = [{ id: 1, name: "Good", value: 9}, { id: 2, name: "Bad", value: 1 }];

The object I'm rating looks like this:

$scope.obj = [
     {
         id: "fff",
         rating: {
             id: 1,
             name: "Good",
             value: 9
     }

];

This is my markup:

<div ng-show="rating=false">{{ obj.rating.name }}</div>

<select ng-show="rating"
        ng-change="rate(obj); rating=false;"
        ng-model="obj.rating"
        ng-options="rating.name for rating in ratings">
</select>

My issue is that when initially rendering the dropdown, no value is selected. After selecting a value in the dropdown, that value sticks. It's displayed in the <div> as well as in the dropdown if that becomes visible again.

How do I preselect the value that's in obj.rating initially? It is displayed correctly in the <div> but not in the dropdown.

Answer 1

I just found the solution in a referenced thread:

ng-options="rating.name for rating in ratings track by rating.id">