how to set dropdown default value using angularjs

Question

please refer the below fiddle http://jsfiddle.net/nq1eyj1v/117/

can any one help how to set default option value as "Select" Select on load ?

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">
   <div class="col-xs-12">
      <label class="col-xs-6 control-label">Type:</label>
      <div class="col-xs-6">
         <select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
            <option ng-option value="Default">Select</option>
            <option ng-option value="Cash">Cash</option>
            <option ng-option value="Check">Check</option>
            <option ng-option value="Money Order">Money Order</option> 
         </select>
      </div>
   </div>

   <div class="col-xs-12"  ng-if="payment.type == 'Cash'">
     11111111111111
    </div>

    <div class="col-xs-12" ng-if="payment.type == 'Check'">
    22222222222
    </div>

    <div class="col-xs-12"  ng-if="payment.type == 'Money Order'">
     3333333333333
    </div>

</div>

Answer 1

I've update your JSFiddle here.

I replaced the options using ng-options.

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <div class="col-xs-12">
        <label class="col-xs-6 control-label">Type:</label>
            <div class="col-xs-6">
                <select name="type" ng-model="payment"
                    ng-dropdown required 
                    ng-change="changeme()"
                    ng-options="option.type for option in options">
                </select>
            </div>
        </div>

        <div class="col-xs-12"  ng-if="payment.type == 'Cash'">
            11111111111111
        </div>

        <div class="col-xs-12" ng-if="payment.type == 'Check'">
            22222222222
        </div>

        <div class="col-xs-12" ng-if="payment.type == 'Money Order'">
            3333333333333
        </div>
    </div>
</div>

JS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.options = [
        { type: 'Select' },
        { type: 'Cash' },
        { type: 'Check' },
        { type: 'Money Order' }
    ];

    $scope.payment = $scope.options[0];
}

As you can see, I initialized the $scope.payment.type value as 'Select' by assigning it the first $scope.options value.

Answer 2

Very easy. Just add empty value inside option.

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

Finally :

 <select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
            <option ng-option value="">Select</option>
            <option ng-option value="Cash">Cash</option>
            <option ng-option value="Check">Check</option>
            <option ng-option value="Money Order">Money Order</option> 
         </select>

Updated Fiddle: http://jsfiddle.net/nq1eyj1v/118/

EDIT 1 :

<div ng-app="myApp" ng-controller="MyCtrl">
   <div class="col-xs-12">
      <label class="col-xs-6 control-label">Type:</label>
      <div class="col-xs-6">
         <select name="type" ng-model="payment"  ng-dropdown required ng-change="changeme(payment)" ng-options="option.name for option in options"> 
              <option ng-option value="">Select</option>
         </select>
      </div>
   </div>

   <div class="col-xs-12"  ng-if="payment.name == 'Cash'">
     11111111111111
    </div>

    <div class="col-xs-12" ng-if="payment.name == 'Check'">
    22222222222
    </div>

    <div class="col-xs-12"  ng-if="payment.name == 'Money Order'">
     3333333333333
    </div>

</div>

JS:

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {
    $scope.options = [
        { name: 'Cash' },
        { name: 'Check' },
        { name: 'Money Order' }
    ];

    $scope.changeme = function (payment) {
       alert(payment.name)
    }

}

FIDDLE: http://jsfiddle.net/nq1eyj1v/121/