ngOption default selected option

Question

How to have a default option in select box...I tried several options and do not get it

I tried creating a scope on my contralador with the value of the object that comes from json:

Like this:

$scope.productSelect = $scope.item[0];

this my code:

html:

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url">

JS:

(function (){

  'use strict';

  /**
   * @ngdoc function
   * @name variantApp.controller:AppCtrl
   * @description
   * # AppCtrl
   * Controller of the variantApp
   */

   var app = angular.module('variantApp.product.variantCtrl', []);

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

      $scope.item = [
        ProductVariant.getData()
      ];

     $scope.productSelect = $scope.item[0];

     $log.info($scope.productSelect);


   }]);

})(window, angular);

Answer 1

You have ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url" And $scope.productSelect = $scope.item[0];

So either you're trying to select out of one option or you're initializing your productSelected to the same array.

Answer 2

What you want ? To show a default option, please use

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url">
<option value="">Default</option>
</select>

Or to show a default selected value only then use:

ng-selected="EXPRESSION". Like

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url" ng-selected="$first">

To show first value selected

Answer 3

 $scope.item = [
    ProductVariant.getData()
  ];

 $scope.productSelect = $scope.item[0];

If ProductVariant.getData() is a promise (async call), then $scope.item[0]; could also be undefined at the stage that $scope.productSelect = $scope.item[0]; is called.

Although as someone else mentioned there is also the strange fact that you are repeating over only the first index in the item list: product in item[0]

Answer 4

Thanks for the help.

With the help of firebug and each of you and in special skubski I have resolved

The change I've made:

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' - '+product.variantQualifierName for product in item[0] track by product.url">
</select>

for this:

<select id="variant" class="form-control variant-select"
        ng-model="productSelect"
        ng-options="product as product.formattedPrice+' -     '+product.variantQualifierName for product in item track by product.url">
</select>

and

$scope.item = [
    ProductVariant.getData()
  ];

 $scope.productSelect = $scope.item[0];

for this:

$scope.item = ProductVariant.getData();
$scope.productSelect =  $scope.item[0];

With these changes, I 've gotten that one of the products is selected by default.