var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = [{
model: "Ford Mustang",
color: "red"
},
{
model: "Fiat 500",
color: "white"
},
{
model: "Volvo XC90",
color: "black"
}
];
$scope.cl = function() {
alert($scope.ename)
$scope.selectedCar = ""
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<div ng-repeat="y in cars">
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
</div>
<h1>You selected: {{selectedCar}}</h1>
<button ng-click="cl()">click</button>
</div>Due to ng-repeat in the code above, each select box has its own scope, making it difficult to clear all selected options at once.
Do you have any suggestions on how to resolve this issue?