Angular.jsでselectの初期値を設定する

Angular.jsでselectの初期値を設定する方法をメモ。

サンプルコード

まずはうまくいかなかった例です。

HTML

<div ng-controller="select_Ctrl">
	<select name="select" ng-model="select">
		<option value="">-----</option>
		<option value="{{option.value}}" ng-repeat="option in options">{{option.name}}</option>
	</select>
</div>

JavaScript

angular.module('app', []).controller('select_Ctrl', function($scope) {
	// selectに設定するoption
	$scope.options = [
		{
			'name': '高海 千歌',
			'value': 0
		}, {
			'name': '桜内 梨子',
			'value': 1
		}, {
			'name': '松浦 果南',
			'value': 2
		}, {
			'name': '黒澤 ダイヤ',
			'value': 3
		}, {
			'name': '渡辺 曜',
			'value': 4
		}, {
			'name': '津島 善子',
			'value': 5
		}, {
			'name': '国木田 花丸',
			'value': 6
		}, {
			'name': '小原 鞠莉',
			'value': 7
		}, {
			'name': '黒澤 ルビィ',
			'value': 8
		}
	]
	// 初期値設定
	$scope.select = 5;
});

ng-repeatで設定した場合、初期値の設定がうまくできませんでした。
うまくいかなかった場合のデモページ
　

サンプルコード2

ng-repeatではなくng-optionsを使うとうまく設定できました。

HTML

<div ng-controller="select_Ctrl">
	<select name="select" ng-model="select" ng-options="option.value as option.name for option in options">
		<option value="">-----</option>
	</select>
</div>

JavaScriptの設定は同じなので省略します。
selectの初期値設定のデモページ
　

【参考サイト】

• AngularJSで動的生成したselectタグに初期値を設定する – Qiita
• AngularJSのng-optionsでデフォルト値をセットする方法 – Qiita