Set default value inside ngSelect

Question

I have a a ngSelect with some options in it.

<select data-ng-model="type" data-ng-change="option(type)">
   <option data-ng-repeat="type in languages" value="{{type.i18n}}">
        {{type.language}}
    </option>
</select>

And a Controller

angular.module('navigation', [])
.controller('NavCtrl',['$scope','$translate', function($scope,$translate){

    $scope.option = function(type){
        console.log(type) //this display the i18n value of languages
        $translate.use(type);
    }

    $scope.languages = [
        { language: "English", i18n: "en_EN"},
        { language: "Swedish", i18n : "se_SE" }
    ];
}])

I want the ngSelect to have a default option, in my case: "English". I've tried to set it to:

$scope.type = $scope.languages[0].language; // English
$scope.type = $scope.languages[0]; //The whole darn json object.

Help please?

Solution 1

Try this way

<select  ng-model="selectedlanguage" ng-change="option(this.selectedlanguage)"  ng-options="i.language for i in languages">
            </select>

//Js code

angular.module('navigation', [])
.controller('NavCtrl',['$scope','$translate', function($scope,$translate){

    $scope.option = function(type){
        console.log(type) //this display the i18n value of languages
        $translate.use(type);
    }

    $scope.languages = [
        { language: "English", i18n: "en_EN"},
        { language: "Swedish", i18n : "se_SE" }
    ];

    **$scope.selectedlanguage = $scope.languages[0];**
}])

Solution 2

how about using ngSelected? http://docs.angularjs.org/api/ng/directive/ngSelected

<option ng-selected="$index==0"></option>

or

<option ng-selected="type.language=='English'"></option>

Solution 3

Working example: http://plnkr.co/edit/yv8gew3IDGxjH666UmlC?p=preview

<select data-ng-model="selectedType">
  <option data-ng-repeat="lang in languages" value="{{lang.i18n}}">
    {{lang.language}}
  </option>
</select>

JS:

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

    $scope.$watch('selectedType', function(type){
        if (!type) return;
        console.log(type) //this display the i18n value of languages
        // $translate.use(type);
    });

    $scope.languages = [
        { language: "English", i18n: "en_EN"},
        { language: "Swedish", i18n : "se_SE" }
    ];

    $scope.selectedType = $scope.languages[0].i18n;
}]);

Notes:

• Have removed the $translate service for ease of reproduction.
• Have changed an ng-changed callback to a $watch on the $scope but that is merely aesthetic choice.
• The crucial change was that you were choosing the lang.i18n for type but were setting type to lang.language, thus resulting in no matches in the options list.

Solution 4

I don't have enough reputation to comment so I will leave it as an answer.

The Ramesh Rajendran answer is right, but you tried using a different ngOptions syntax. If you use the label for value in array syntax, then you have to bind the model attribute to the entire object. If you use the syntax in your comment, which is select as label for value in array then you have to bind the model to the select.

In order words, his example works, and to your example on the comment to work you need to replace $scope.selectedlanguage = $scope.languages[0]; with $scope.selectedlanguage = $scope.languages[0].i18n;

Check the select directive documentation for further information

View more solutions

Comments

[Jay Shukla]

change $scope.type to $scope.tVal.

[petur]

I've tried this way: <select data-ng-change="option()" data-ng-model="type" data-ng-options="value.i18n as value.language for value in languages" > <option ng-selected="value[0].language"> </option> </select> Gave exactly the same output. Still no default value. Your option value comes out undefined.

[petur]

Thank you! Works like a charm, the <option> tag is hence unnecessary?

[petur]

Ah, tried it again and works. But looks like Ramesh answer is more correct, since you don't have to use <option> at all.

[Ramesh Rajendran]

You don't want option tag, see my answer totally . Happy coding dude :)