угловой выбрана опция игнорируется

Question

У меня есть этот HTML:

<div class="form-group" ng-hide="controller.sports.loading"> 
    <label for="sport">Sport</label> 
    <div class="input-group"> 
     <div class="input-group-addon">2</div> 
     <select class="form-control" id="sport" ng-model="controller.team.data.sport"> 
      <option ng-repeat="sport in controller.sports.data" value="{{ sport.slug }}"> 
       {{ sport.title }} 
      </option> 
     </select> 
    </div> 
</div> 

Как вы можете видеть, модальный граница controller.team.data.sport. Если я смотрю на это, он содержит спортивную пулю (например, теннис). Но даже если это заполнено, нет выбранного варианта. Я думаю, что это может быть из-за моего ng-repeat. Я устанавливаю свою ценность как sport.slug, но текст присваивается sport.title.

Как я могу получить свой выбранный вариант на основе sport.slug?

Вот пример модели:

var team = { 
    loading: false, 
    data: { 
     id: 1, 
     name: 'Test', 
     sport: 'tennis' 
    } 
}; 

Answer 1

Я думаю, вы должны использовать ng-options

<select ng-model="controller.team.data.sport" ng-options="sport.slug as sport.title for sport in controller.sports.data"> 
</select> 

EDIT: Я перепутала порядок sport.slug и sport.title в первом в месте,

Answer 2

Попробуйте это -

<select ng-model="controller.team.data.sport" ng-options="sport.slug as sport.title for sport in controller.sports.data"></select>

Старайтесь как можно чаще использовать угловую функциональность.