I'm working on multiple selectboxes, when I click on the first select box value, it gets displayed on the third selectbox and when I click on the second select box value, it gets displayed on the third selectbox. Hence, the data is not getting binded.
<div class="btn-group" style="margin-top: 50px">
<button type="button" ng-model="dropdown" class="btn btn-primary">{{ddn}}</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<div ng-repeat="ddl in ddList" style="margin-left: 20px">
<a class="dropdown-item" ng-click="changeValue(ddl.Parameter)" href="#">{{ddl.Parameter}}</a>
</div>
</div>
</div>
<div class="btn-group" style="margin-top: 50px">
<button type="button" ng-model="dropdown" class="btn btn-primary">{{ml}}</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<div ng-repeat="ml in machineList" style="margin-left: 20px">
<a class="dropdown-item" ng-click="changeValue(ml.MachineName)" href="#">{{ml.MachineName}}</a>
</div>
</div>
</div>
<div class="btn-group" style="margin-top: 50px">
<button type="button" ng-model="dropdown" class="btn btn-primary">{{dl}}</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<div ng-repeat="dl in deptList" style="margin-left: 20px">
<a class="dropdown-item" ng-click="changeValue(dl.DeptName)" href="#">{{dl.DeptName}}</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
$scope.ddList = null;
$http.get(apiUrl + "/api/Warehouse/getDropdownList")
.then(function (response) {
$scope.ddList = JSON.parse(response.data);
$scope.parameter = $scope.ddList[0].Parameter;
})
$scope.ddn = null;
$scope.changeValue = function (parameter) {
debugger;
$scope.ddn = parameter;
}
$scope.machineList = null;
$http.get(apiUrl + "/api/Warehouse/getMachineList")
.then(function (response) {
$scope.machineList = JSON.parse(response.data);
$scope.machineName = $scope.machineList[0].MachineName;
})
$scope.ml = null;
$scope.changeValue = function (machineName) {
debugger;
$scope.ml = machineName;
}
$scope.deptList = null;
$http.get(apiUrl + "/api/Warehouse/getDepartmentList")
.then(function (response) {
$scope.deptList = JSON.parse(response.data);
$scope.deptName = $scope.deptList[0].DepartmentName;
})
$scope.dl = null;
$scope.changeValue = function (deptName) {
debugger;
$scope.dl = deptName;
}
