如何在data-ng-options创建的下拉列表中设置默认选定选项

Question

I have a select dropdown which is being setup and the options created via 'data-ng-options'

This is the HTML:

<select class="form-control" id="playListOpt" ng-model="playListItem.selectedObject" ng-change="changePlaylist(playListItem.selectedObject)" ng-required="true"
              data-ng-options="playListItem as playListItem.name for playListItem in playListDataForActivity">
        <option value="" translate="PLAYLIST_CREATE_NEW"></option>
      </select>

This produces the following output in the compiled html:

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" id="playListOpt" ng-model="playListItem.selectedObject" ng-change="changePlaylist(playListItem.selectedObject)" ng-required="true" data-ng-options="playListItem as playListItem.name for playListItem in playListDataForActivity" required="required" aria-required="false" aria-invalid="false" style=""><option value="" translate="PLAYLIST_CREATE_NEW" class="" selected="selected">Create New Playlist</option><option label="Dev Playlist 1" value="object:2670">Dev Playlist 1</option><option label="Dev Playlist 2 (Favorite)" value="object:2671">Dev Playlist 2 (Favorite)</option></select>

Currently the option 'Create New Playlist' is always the selected option. However i'd like to set the selected option to be the one which is set to 'isDefault' which is available to me via playListItem. I feel my issue is not understanding how to set the selectedObject since the value of the option seems to be getting generated by the code?

This is the code in the controller where if the item is set to 'isDefault' that i'm setting the selectedObject. This doesn't work.

if (response && response.status == 200) {
              $scope.playListDataForActivity = response.data.playlists;
              $scope.totalOwnedPlaylistCount = response.data.totalOwnedPlaylistCount;

              for (var i = 0; $scope.playListDataForActivity[i]; i++) {
                if ($scope.playListDataForActivity[i].isDefault)
                  $scope.playListItem.selectedObject = $scope.playListDataForActivity[i];
                }
          }

Any tips on what I need to do to fix this?

Updated code above and new question below

After the change suggested below by @Lex both the 'Create New Playlist' and the IsDefault option are being flagged as selected in the HTML

<select class="form-control ng-pristine ng-valid ng-valid-required ng-touched" id="playListOpt" ng-model="playListItem.selectedObject" ng-change="changePlaylist(playListItem.selectedObject)" ng-required="true" data-ng-options="playListItem as playListItem.name for playListItem in playListDataForActivity" required="required" aria-required="false" aria-invalid="false" style=""><option value="" translate="PLAYLIST_CREATE_NEW" class="" *selected="selected"*>Create New Playlist</option><option label="Dev Playlist 1" value="object:2996">Dev Playlist 1</option><option label="Dev Playlist 2 (Favorite)" value="object:2995" *selected="selected"*>Dev Playlist 2 (Favorite)</option><option label="Dev Playlist 3" value="object:2997">Dev Playlist 3</option></select>

Is there something I need to clear, or is there something in the 'select' that needs to be added?

Answer 1

for updated code and new question, If you have particular value set as default selected value, then no need to have <option value="" translate="PLAYLIST_CREATE_NEW"></option> as data-ng-options is being used. By removing option, it will get solved. Hope this helps!