Upon examining the HTML code below, there is an issue with selecting an option based on the sport.slug:
<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>
The selected option does not reflect the sport.slug in the model. The ng-repeat seems to be causing this mismatch between the value and text displayed.
To align the selection with the sport.slug, adjustments need to be made. Here's a snapshot of the model for reference:
var team = {
loading: false,
data: {
id: 1,
name: 'Test',
sport: 'tennis'
}
};