Cacading Drop Down 2nd Dropdown名称没有得到更改angularjs？

Question

I have mobile brand list .here based on 1st drop down 2nd dropdown list is coming but .when i select nokia in 1st dropdown ,Lumia 735,Asha 230,Lumia 510 these are coming in 2nd dropdown,in 2nd dropdown i have selected Lumia 735 its working fine but again i have selected Samsung in 1st dropdown here 2nd drop list got changed but already selected Lumia 735 still showing . expectation:based on 1st dropdown selection 2nd dropdown should come 2.after 1st and 2nd dropdown selection ,when i submit i need to get id,brandname,modelname

 angular.module('myApp', ['ui.filters']) .controller("myCntrl", function ($scope) { $scope.items= [{ id: "986745", brandname: "Nokia", modelname: "Lumia 735", price: "7500" }, { id: "896785", brandname: "Nokia", modelname: "Asha 230", price: "12000" }, { id: "546785", brandname: "Nokia", modelname: "Lumia 510", price: "9500" }, { id: "144745", brandname: "Samsung", modelname: "Samsung 110", price: "13000" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5", price: "5500" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note 4 Duos", price: "5500" }, { id: "986980", brandname: "Samsung", modelname: "Galaxy A5", price: "5500" }, { id: "586980", brandname: "Samsung", modelname: "Galaxy Note 4 Duos", price: "1000" }, { id: "232980", brandname: "Htc", modelname: "One X9", price: "1000" }, { id: "456798", brandname: "Htc", modelname: "Desire 820", price: "1000" } ] $scope.test = function() { console.log($scope.id); console.log($scope.selectedBrand); console.log($scope.selectedModel); } }) $(function () { setTimeout(function () { $("select").select2(); }, 100); }); //]]> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" /> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script> <div ng-app="myApp"> <div ng-controller="myCntrl"> <form name="addvehicleForm" data-ng-submit="test()" novalidate> <label>List Of Brand</label> <label for="singleSelect"> select: </label> <select ng-model="selectedBrand"> <option ng-repeat="item in items | unique: 'brandname'" value="{{item.brandname}}">{{item.brandname}}</option> </select> <select ng-model="selectedModel"> <option ng-repeat="item in items | filter: {brandname: selectedBrand}" value="{{item.modelname}}">{{item.modelname}}</option> </select> <div class="padding"> <button class="button button-full button-stable" type="submit" > Save </button> </div> </form> </div> </div> 

pls run above code and solve the issue

Answer 1

Seems all you want is to clear the model if you change the brand, to do that, just put ng-click on

<select ng-model="selectedBrand">
<option ng-repeat="item in items | unique: 'brandname'" value="{{item.brandname}}" 
               ng-click="setNull()">{{item.brandname}}</option>
</select>

and in script do something like

angular.module('myApp', ['ui.filters'])
    .controller("myCntrl", function ($scope) {

          $scope.setNull = function(){

               $scope.selectedModel = "";

          }
          .
          .
          .