How to Have a Default Option in Angular.Js Select Box

How to have a default option in Angular.js select box

You can simply use ng-init like this

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>

How do I set the default option for select with AngularJS?

The linked answer suggests using ng-init. I would go with assigning default option into selectedOption in controller or directive's link function:

$scope.selectedOption = options[0]

I don't see a need to use another directive for this simple task.

How do I set default value of select box in angularjs

You can simple use ng-init like this

<select ng-init="somethingHere = options[0]" ng-model="somethingHere" ng-options="option.name for option in options"></select>

Setting a default value to AngularJs select which doesn't exist in ng-options

I did some playing around with your fiddle, and you can solve this problem by adding an option that is disabled and hidden, but is also set as the default value.

This results in the options not being shown in the drop down list for selection, but it still displays the value as the default. Which is what you seem to be trying to achieve.

For example:

<select ng-model="select2" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']">
    <option value="" disabled selected style="display: none;">Please Select</option>
</select>

I have also updated your fiddle to demonstrate.

Select default option with ng-options using a flat array

How to select the hard-coded `null` option with ng-options and ng-model

To select the single hard-coded <option>, assign null to the model:

angular.module('MyApp', []).controller('MyCtrl', ['$scope', function ($scope) {
  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  ̶$̶s̶c̶o̶p̶e̶.̶r̶e̶s̶u̶l̶t̶O̶p̶t̶ ̶=̶ ̶'̶'̶;̶
  $scope.resultOpt = null;
}]);

From the Docs:

Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.

For more information, see

AngularJS <select> Directive API Reference

The DEMO

angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {

  $scope.testOpt = [
    'ID',
    'Name',
    'Email',
    'Address'
  ];
  $scope.resultOpt = null;
}]);

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="MyApp" ng-controller="MyCtrl">

    <select ng-options="opt as opt for opt in testOpt"
            data-ng-model="resultOpt">
      <option value="">Choose Category</option>
    </select>

    <br><br>
    <button ng-click="resultOpt=null">Reset</button>
 
</body>

AngularJS - display a default option at the top of a dynamic select dropdown list?

You can create a custom function to update the orderBy option based on the required logic. The custom function updateOptionOrder simply check if the current option label value is Text or not. If yes, then we just skip sorting and keep the current option at the top, else continue default sorting based on the label value.

Demo:

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

app.controller('AppCtrl', function($scope) {

  $scope.currentOptions = [

      {label:'Text', id:'1'},

      {label:'Banana', id:'2'},

      {label:'Apple', id:'3'},

      {label:'Notebook', id:'4'},

      {label:'Coffee', id:'5'}, {label:'Zebra', id:'6'}

    ];

    

  $scope.updateOptionOrder = function(v) {

    if(v.label == "Text"){

       return -1; // Skip this sort for "Text"

    }else{

       return v.label; // Continue sorting based on label

    }

  } 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="AppCtrl">

    <select ng-options="t.id as t.label for t in currentOptions | orderBy:updateOptionOrder" class="form-control" style="width:50%" ng-model="field"></select>

    <hr>

    <p>{{field}}</p>

  </div>

</div>

How to show default option in select option (drop down box) in an ng-repeat of rows?

You can use default value in controller

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedSchoolDayID"  ng-options="x.ID as x.code for x in AMListData" >
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.a={
    //SchoolDayID:'2'
  };

  $scope.selectedSchoolDayID=$scope.a.SchoolDayID || '1';//'1' is Default Value
    
  $scope.AMListData=[
    { ID: '0', code: 'PM Programming' },
    { ID: '1', code: 'AM Programming' },
    { ID: '2', code: 'Supplemental'   }
  ];
   
});
</script>

</body>
</html>

Default Option not selected dropdown in angularjs

Your object IDs are string whereas your data.model is number.

Uniform your data type and it will work.

(function(angular) {

  'use strict';

angular.module('ngrepeatSelect', [])

  .controller('ExampleController', ['$scope', function($scope) {

    $scope.data = {

     model: null,

     availableOptions: [

       {id: '1', name: 'Option A'},

       {id: '2', name: 'Option B'},

       {id: '3', name: 'Option C'}

     ]

    };

    

    $scope.data.model='1';

    

 }]);

})(window.angular);

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Example - example-select-ngrepeat-production</title>

  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

  <script src="app.js"></script>

  

  

</head>

<body ng-app="ngrepeatSelect">

  <div ng-controller="ExampleController">

  <form name="myForm">

    <label for="repeatSelect"> Repeat select: </label>

    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">

      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>

    </select>

  </form>

  <hr>

  <tt>model = {{data.model}}</tt><br/>

</div>

</body>

</html>

Set a default value in a select dropdown using Angular

I think leaveTypes value you are using is of object type ,where you want to display name but select id, for these kind of scenarios use ngOptions instead of ngRepeat

and modify your select as below, I had assigned id 2 for Tobias

<select ng-model="selectedName" ng-init="selectedName=2" ng-options="data.id as data.name for data in leaveTypes"></select>

Please check below plunker for demo

https://plnkr.co/edit/GWsXGohTr6jvG67CY00D?p=preview

How do I set the first option selected in angularJS

You can initialize your model like
$scope.current_Hotel = $scope.hotels.data[0]; as soon as you get response in $scope.hotels object array.

$http({

    url: '',

    method: "POST",

    data: 'postData',

    headers: {

        'Authorization': ''

    }

}).then(function (response) {

            $scope.hotels = response.data;

          $scope.current_Hotel = $scope.hotels.data[0];

        });

How to Have a Default Option in Angular.Js Select Box