Select default value in dynamic dropdown in Angular JS

Question

This is my code what's wrong in this

<select name="countryName" class="form-control" ng-model="twoFAData.country" style="height:35px">
  <option ng-repeat="country in contriesWithCode" value="{{country[2]}}" ng-selected="accountDetailsRes.country == country[2]">{{country[1]}} ({{country[0]}})</option>
</select>

In the JS I defined this

$scope.defaultCountry = "USA";

$rootScope.accountDetailsRes = {country: $scope.defaultCountry, state: "selectstate"}; // its default country

Thanks In advance

possible a duplicate . https://stackoverflow.com/questions/33993468/how-to-set-default-value-in-ng-options — sitaram9292, Oct 09 '18 at 10:38
@kapil also why r u using $rootScope? is this inside a components? — Diana R, Oct 09 '18 at 10:43

score 1 · Accepted Answer · answered Oct 09 '18 at 14:05

To start, I would recommend you to use ng-options instead of ng-repeat when having many dropdown options as it performs better.

<select ng-options="country[0] as country[0].concat(' ('+country[1]+')') for 
  country in contriesWithCode" ng-model="twoFAData.country" 
  name="countryName" class="form-control" style="height:35px">
</select>

Then, if you want a default value just set $scope.twoFAData.country = 'USA' or $scope.twoFAData.country = $scope.defaultCountry.

app.controller('BaseController', function($scope) {
  $scope.defaultCountry = "USA";
  $scope.twoFAData = {};
  $scope.twoFAData.country = $scope.defaultCountry;
  $scope.contriesWithCode = [['USA', 'United States'], ['ARG', 'Argentina']];
});

code is working fine outside the pop box (modal) but not working inside popup box they can't select default value in pop up ,please provide any suggestions — kapil, Oct 22 '18 at 08:26
Please provide more information, ¿maybe some code to see your issue? — matuteale, Oct 22 '18 at 22:08

score 0 · Answer 2 · answered Oct 09 '18 at 10:46

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {

    $scope.formData = {
        people : 2

    }
    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
        { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
        { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
        { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
    ];
    
    
  
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
              <select 
                ng-model="formData['people']">
              <option ng-repeat="item in people" value="{{item['id']}}">{{item['first']}}</option>

              </select>
{{people[formData['people']]['first']}}  {{people[formData['people']]['last']}} - {{people[formData['people']]['actor']}}
    </fieldset>
</div>

Select default value in dynamic dropdown in Angular JS

2 Answers2