# select-ui reset dropdown programatically

I’m new to AngularJS, I have 2 dynamic select boxes, changing the first affects the options of the second, but the problem is that the second dropdown select keeps the last item selected from the previous select operation, so I need to clear it before appending the new items.

What i did was:

carsCtrl.models.selected = undefined;

as i saw in Angular example:

  vm.clear = function() {
vm.person.selected = undefined;
vm.country.selected = undefined;
};


but that didn’t work for me, here is my code:

 <ui-select tagging ng-model="carsCtrl.brand" name="brand" value="@{{brand}}" on-select="changeBrand(carsCtrl.brand)" ng-required="true">
<ui-select-match placeholder="Pick one...">@{{$select.selected.title}}</ui-select-match> <ui-select-choices repeat="val in carsCtrl.brands | filter:$select.search track by $index"> <div ng-bind="val.title | highlight:$select.search"></div>
</ui-select-cfhoices>
</ui-select>

<ui-select tagging ng-model="carsCtrl.model" name="model" value="@{{model}}" ng-required="true">
<ui-select-match placeholder="Pick one...">@{{$select.selected.title}}</ui-select-match> <ui-select-choices repeat="val in carsCtrl.models | filter:$select.search track by $index"> <div ng-bind="val.title | highlight:$select.search"></div>
</ui-select-cfhoices>
</ui-select>


Angular code:

 var items = [{......}]
carsCtrl = this;
carsCtrl.brands = items;
carsCtrl.models = [];

\$scope.changeBrand = function(brand){
carsCtrl.models.selected = undefined;
carsCtrl.models = brand.models;
console.log(brand);
}


Can you please teach me what I did wrong or what I need to do?

Thanks.

Source: AngularJS