Currently, I am in the process of developing a web application where the user is required to select an option from the first drop-down list. Upon selecting an option from this list, a second drop-down list loads with data that is dependent on the selection made in the first drop-down. If the second drop-down list contains only one item, the ng-model gets updated accordingly. However, if there are multiple items in the second drop-down, the ng-model does not get updated and always displays the last item selected.
For reference, here is the link to the code on Jsbin: Jsbin link
<body ng-app="starter">
<div ng-controller="MyCtrl">
<div> Map Type<select ng-model="Map.TypeSel" ng-options="item as item.Name for item in Map.Types track by item.Id" ng-init="Map.TypeSel=Map.Types[0]"></select></div>
<div>Commodity<select ng-model="Map.MapSel" ng-options="item as item.Metal for item in Map.Cord[Map.TypeSel.Code] track by item.Dim" ng-init="Map.MapSel=Map.Cord[Map.TypeSel.Code][0]" ng-change="loadMap()"></div>
</div>
<script>
var app=angular.module('starter', []);
app.controller('MyCtrl', function ($scope) {
$scope.Map = [];
$scope.Map.Cord = [];
$scope.Map.Types = [{ Name: "Geology", Id: 0, Code: "Geo" }, { Name: "Metallic", Id: 1, Code: "Met" }, { Name: "Non Metallic", Id: 2, Code: "Non" }, { Name: "Rare Earth", Id: 3, Code: "Ear" }, { Name: "Metallic & Non Metallic", Id: 4, Code: "MNe" }];
$scope.Map.Cord.Geo = [{ "Metal": "Geology Of Oman", "Dim": "2481,3509", "Path": "img/M/GEOLOGY_OF_OMAN.jpg" }];
$scope.Map.Cord.Met = [{ "Metal": "CHROMITE", "Dim": "2481,3509", "Path": "img/M/Metallic/CHROMITE(M).jpg" }, { "Metal": "COPPER", "Dim": "2481,3509","Path":"img/M/Metallic/COPPER(M).jpg" }, { "Metal": "GOLD", "Dim": "2481,3509","Path":"img/M/Metallic/GOLD(M).jpg" }, { "Metal": "IRON", "Dim": "2481,3509","Path":"img/M/Metallic/IRON(M).jpg" }];
$scope.Map.Cord.Non = [{ "Metal": "ASBESTOS", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ASBESTOS(NM).jpg" }, { "Metal": "BARITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/BARITE(NM).jpg" }, { "Metal": "CLAY", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/CLAY(NM).jpg" }, { "Metal": "GYPSUM", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/GYPSUM(NM).jpg" }, { "Metal": "KAOLIN", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/KAOLIN(NM).jpg" }, { "Metal": "LATERITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LATERITE(NM).jpg" }, { "Metal": "LEAD", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LEAD(NM).jpg" }, { "Metal": "LIMESTONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LIMESTONE(NM).jpg" }, { "Metal": "ORNAMENTAL STONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ORNAMENTAL_STONE(NM).jpg" }, { "Metal": "PHOSPHATE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PHOSPHATE(NM).jpg" }, { "Metal": "PYRITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PYRITE(NM).jpg" }, { "Metal": "SILICA", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/SILICA(NM).jpg" }];
$scope.Map.Cord.Ear = [{ "Metal": "STRONTIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/STRONTIUM(RE).jpg" }, { "Metal": "URANIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/URANIUM(RE).jpg" }];
$scope.Map.Cord.MNe = [{ "Metal": "Metalic & Non Metalic", "Dim": "2481,3509", "Path": "img/M/M&NM.jpg" }];
$scope.loadMap = function () {
console.log($scope.Map.MapSel);
}
});
</script>
Can someone please provide guidance on what might be the issue with my code?