Double radio button selection bug AngularJs

Question

I have a set of radio buttons, when I load my app the first radio is selected by default, so if I go to the second radio I can see different information in an HTML table, then If I change the values of my filters and then make a request I want the radio buttons refresh again and have the default selected but that is no happening, the second radio button is selected.

    <div class="radio" ng-init="topTable='topCategory'">
        <label class="radio-inline"><input type="radio" ng-model="topTable" value="topCategory" ng-change="updateTotals('topCategory')">TY Top 30 Categories</label>
        <label class="radio-inline"><input type="radio" ng-model="topTable" value="topSupplier" ng-change="updateTotals('topSupplier')">TY Top 10 Suppliers</label>
        <label class="radio-inline"><input type="radio" ng-model="topTable" value="topBrand" ng-change="updateTotals('topBrand')">TY Top 10 Brands</label>
    </div>

The ng-init make the first radio to be selected I also used a function like this

    function topRadios() {
        $scope.topTable = "topCategory";

    }

and my ng-init was "ng-init="topRadios()";

I dont know if I need to use ng-value instead of value or if I need to add some logic to my controller or what.

Any help on this?

Are you attempting to do something like this? jsfiddle.net/u9vm0ryx/2 — BuddhistBeast
Thanks, it works!! @BuddhistBeast Could you put it as an answer so I can mark it as correct. — kennechu

BuddhistBeast BuddhistBeast · Accepted Answer · 2016-02-18T20:46:47

You can just recall the function like so:

 <button ng-click="triggerTable()" type="button">Refresh</button>

And the corresponding function:

$scope.triggerTable = function() {
    $scope.topTable = "topCategory";
}

Example

Double radio button selection bug AngularJs

1 Answers