Angular 1.*
Here is the code snippet:
<div class="filter-column">
<div class="filter-title">Market</div>
<div class="bottom-line"></div>
<div class="overflow-container">
<input type="radio" value="all" name="marketRadio"
ng-checked="true" class="resetAll" ng-model="filter.markets"
ng-change="radioMap('market')" checked>All
<div ng-repeat="choice in markets| orderBy: 'name'">
<input type="radio" value="{{choice.name}}" name="marketRadio"
ng-change="radioMap('market')" ng-model="filter.markets" >
{{choice.description}}
</div>
</div>
This is what the controller holds:
var ppvFilter = {
regions: [],
markets: [],
dealers: []
};
$scope.$watchCollection(function() {
return ppvFilter;
},
function(newValue) {
$scope.regions = newValue.regions;
$scope.markets = newValue.markets;
$scope.dealers = newValue.dealers;
});
After refreshing the list of radio buttons programmatically (not through a page refresh) using the code
ppvFilter.markets.length = 0; ppvFilter.markets = ppvFilter.markets.concat(['a', 'b', 'c'])ng-checked="true" attribute no longer works for the "all" option and it becomes unchecked after the list update.
It is believed that this issue arises because the Angular form is referencing old memory even though it displays the new radio button list.