Soy nuevo en AngularJS. Busqué mucho, pero no resuelve mi problema.

Recibo una opción en blanco por primera vez en el cuadro de selección.

Aquí está mi código HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

Pero no parece funcionar. ¿Cómo puedo solucionar esto? Aquí está la demostración de JSFiddle

Como referencia: ¿Por qué angularjs incluye una opción vacía en seleccionar ?

El vacío optionse genera cuando un valor al que se ng-modelhace referencia no existe en un conjunto de opciones pasadas a ng-options. Esto sucede para evitar la selección accidental del modelo: AngularJS puede ver que el modelo inicial no está definido o no está en el conjunto de opciones y no quiere decidir el valor del modelo por sí solo.

En resumen: la opción vacía significa que no se selecciona ningún modelo válido (por válido quiero decir: del conjunto de opciones). Debe seleccionar un valor de modelo válido para deshacerse de esta opción vacía.

Cambia tu código así

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Trabajo de demostración de JSFiddle

ACTUALIZACIÓN (31 de diciembre de 2015)

Si no desea establecer un valor predeterminado y desea eliminar la opción en blanco,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

Y en JS no es necesario inicializar el valor.

$scope.feed.config = $scope.feed.configs[0].value;

Si bien todas las sugerencias anteriores funcionan, a veces necesito tener una selección vacía (que muestre el texto del marcador de posición) cuando ingrese inicialmente a mi pantalla. Entonces, para evitar que el cuadro de selección agregue esta selección vacía al principio (o, a veces, al final) de mi lista, estoy usando este truco:

código HTML

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

Ahora que ha definido esta opción vacía, el cuadro de selección está contento, pero lo mantiene oculto.

Aquí hay un violín actualizado: http://jsfiddle.net/UKySp/

Necesitaba establecer el valor de su modelo inicial en el objeto real:

$scope.feed.config = $scope.configs[0];

Y actualice su selección para que se vea así:

<select ng-model="feed.config" ng-options="item.name for item in configs">

Otro método para resolver es haciendo uso de: $firstenng-repeat

Uso:

<select ng-model="feed.config">
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>

Referencias :

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$ primero : https://docs.angularjs.org/api/ng/directive/ngRepeat

Salud

Hay varias formas como:

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

O

$scope.feed.config = $scope.configs[0].name;

Es una especie de solución, pero funciona de maravilla. Solo agrega <option value="" style="display: none"></option>como relleno. Como en:

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>

Si solo desea eliminar el espacio en blanco, use ng-show y ¡listo! No es necesario inicializar el valor en JS.

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`

Cambie su código de esta manera. Te olvidas de la opción value inside. Antes de asignar el ng-model. Debe tener un valor. Solo entonces no obtiene el valor indefinido.

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

JS

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });

Utilice ng-value en lugar de value .

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

y luego en el archivo html debería ser como:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>

Para mí, la respuesta a esta pregunta fue usar <option value="" selected hidden />como lo propuso @RedSparkle más agregar ng-if="false"para trabajar en IE.

Entonces, mi opción completa es (tiene diferencias con lo que escribí antes, pero esto no importa debido a ng-if):

<option value="" ng-if="false" disabled hidden></option>

Finalmente funcionó para mí.

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>

También verifique si tiene algún valor falso o no. Angularjs insertará una opción vacía si tiene un valor falso. Luché durante 2 días solo por un valor falso. Espero que sea de ayuda para alguien.

Tenía opciones como [0, 1] e inicialmente establecí el modelo en 0 debido a que se insertó una opción vacía. La solución alternativa para esto fue ["0", "1"].