AngularJS set default value in dropdown

Question

I am using below code.

HTML code

<form name="profInfoForm" ng-submit="saveInfo(profInfoForm)" novalidate>
    <div class="wrapper">
        <div class="container">
            <section class="main-ctr">
                <div class="error-msg" ng-show="showErrorMsg">
                    <div class="text">Please fix the validation error(s) below and try again.<br />{{serviceErrorMsg}}</div>
                </div>
                <div ng-include="'views/header.html'"></div>
                <main class="sm-main">
                    <section class="fix-section">
                        <h1>Professional information</h1>
                        <div class="lg-form">
                            <div class="form-group">
                                <label class="text-label lg-label">Salutation</label>
                                <div class="select-wrap lg-select">
                                    <select class="form-input select" name="salutation" required ng-init="profInfo.salutation = item[0]"
                                            ng-options="item.name as item.name for item in salutations"
                                            ng-model="profInfo.salutation">
                                    </select>
                                    <div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
                                        <span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <div class="clear"></div>
                    <div class="button-ctr">
                        <button class="button" ng-class="profInfoForm.$valid ? 'active' : 'disable'">Next</button>
                    </div>
                </main>
            </section>
        </div>
    </div>
    <div id="loading" ng-if="showLoader">
        <img src="images/loader.gif" id="loading-image">
    </div>
</form>

My constant.js

.constant('APP_CONSTANTS', {
    SALUTATIONS: [{ id: 0, name: 'Select' }, { id: 1, name: 'Mr.' }, { id: 2, name: 'Mrs.' }, { id: 3, name: 'Miss' }, { id: 4, name: 'Dr.' }, { id: 5, name: 'Ms'}]
})

Controller code is given below

.controller('professionalInfoCtrl', ['$rootScope', '$scope', '$state', 'globalService', 'APP_CONSTANTS', 'dataServices', function ($rootScope, $scope, $state, globalService, APP_CONSTANTS, dataServices) {
    $scope.showLoader = false;
    $scope.profInfo = userData;
    $scope.salutations = APP_CONSTANTS.SALUTATIONS;
}])

I want to set default value of Salutation drop down list.

For this I am using ng-init but this is not working. I did not to find out the problem.

Answer 1

Please consider using ui-select of AngularUI :

 <ui-select ng-model="$parent.company">
       <!-- using $parent - https://github.com/angular-ui/ui-select/issues/18 -->

       <ui-select-match>{{$select.selected.name}}</ui-select-match>
       <ui-select-choices repeat="company in companies>{{company.name}}</ui-select-choices>
 </ui-select>

Answer 2

I resolved my issue by using below code

<select class="form-input select" ng-model="profInfo.salutation" required
    ng-options="item.name as item.name for item in salutations">
    <option value="">Select salutation...</option>
</select>
<div class="error" ng-show="profInfoForm.$submitted || profInfoForm.salutation.$touched">
    <span ng-show="profInfoForm.salutation.$error.required">Required Field</span>
</div>

As simple I am using

<option value="">Select salutation...</option>

Thanks everyone.