Three columns of radio drop down boxes are present. When a user selects a radio button in the first column, the radio buttons in the second column refresh with a new list. The default behavior is for the top radio button all to be checked each time a new list is loaded into the second column. However, after the second refresh, the ng-check="true" does not apply and the all button is left unchecked.
Is there a way to ensure that the all button remains checked by default when the list of radio buttons in the second column is refreshed with a new list?
<div class="filter-column">
<div class="filter-title">Market</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<div ng-show="markets.length >= 1">
<input type="radio" value="all" name="marketRadio" ng-checked="true" class="resetAll"
ng-model="filter.market" ng-change="radioMap('market')">All
</div>
<div ng-repeat="choice in markets| orderBy: 'name'">
<input type="radio" value="{{choice.name}}" name="marketRadio"
ng-change="radioMap('market', $index)" ng-model="filter.market" >
{{choice.description}}
</div>
</div>
</div>
Here is the logic for when the second column of radio buttons is refreshed with a new list:
var ppvFilter = {
regions: [],
markets: [],
dealers: []
};
function populateMarkets(regionCode) {
ppvFilter.markets.length = 0;
ppvFilter.dealers.length = 0;
var urlPath = API_BASE_URI + 'service/org/' +
regionCode + "/markets";
var params = {
url: urlPath,
method: 'GET'
};
$http(params)
.then(function(response) {
ppvFilter.markets = ppvFilter.markets.concat(response.data);
})
.catch(failure);
}