pass two values in ng-repeat and ng-change

Question

Controller:

var response = {
  "json": {
    "response": {
      "servicetype": "100",
      "functiontype": "101",
      "statuscode": "success",
      "data": [
        {
          "countryid": 1,
          "countryname": "India",
          "countrycode": "91",
          "currencyname": "Indian rupee",
          "currencycode": "INR",
          "latitude": "21.7679",
          "longitude": "78.8718"
        }
      ]
    }
  }
}

  $scope.country = response.json.response.data;

Html:

 <select name="Country" class="form-control1 drop countries" required  ng-model="model.country" placeholder="Select" value="India"  ng-change="getState(model.country);">
    <option value="" disabled selected> Country*</option>
    <option ng-repeat="item in country track by $index" value="{{item.countryid}}">{{item.countryname}}</option>
        </select>

I wanted to pass both the countryname and countryid to fetch list of states , need solution . I could just pass only country id. Need assistance.

Answer 1

<select ng-model="country" required
    ng-options="c as c.countryname for c in country track by c.countryid" ng-change="getState(country.countryid, country.countryname);" >
    <option value="">Country*</option>
</select>

Use ng-options, you will get all values in country model

Answer 2

Use ng-options instead:

 <select  ng-model="model.country" required
    ng-options="c.countryid as c.countryname for c in country" >
    <option value="">Country*</option>
</select>

It will give you output:

<select ng-model="model.country" required="" 
       ng-options="c.countryid as c.countryname for c in country" 
       class="ng-pristine ng-invalid ng-invalid-required">
    <option value="" class="">Country*</option>
    <option value="0">India</option>
</select>

Demo Fillde

---

About your case: track by $index is what breaks your select

Demo Fillde 2