uib-btn-radio not working with ng-model

Question

I am trying to make a dynamic set of radio buttons with ui-bootstrap but with the following code, the model variable is not being updated when I select each radio button and they seem to act more like checkboxes.

HTML:

<div class="panel panel-default">
    <div class="panel-body">
        <span style="position: fixed; padding-top: 7px;">Current Selection: {{getOrdinal(currentSelection + 1)}} repetition</span>
        <button class="right btn btn-default" type="button" ng-click="selectionNumber(1)"><i class="glyphicon glyphicon-plus"></i></button>
        <button class="right btn btn-default" type="button" ng-click="selectionNumber(-1)"><i class="glyphicon glyphicon-minus"></i></button>
        <button class="right btn btn-default" type="button" ng-click="" style="padding:2px 5px"><img src="images/ColourWheel.png" alt="?" style="max-height:28px"></button>
    </div>
    <div class="panel-body">
        <div class="btn-group">
            <label class="btn btn-default" ng-model="currentSelection" uib-btn-radio="$index" ng-repeat="val in getCollection(selections) track by $index" uncheckable>{{getOrdinal($index + 1)}}</label>
        </div>
    </div>
</div>

JS:

$scope.selections = 1;
$scope.currentSelection = 0;

$scope.selectionNumber = function(change) {
    $scope.selections += change;
    $scope.selections = Math.max($scope.selections, 1);
}

$scope.getOrdinal = function(n) {
    var s = ["th", "st", "nd", "rd"];
    var v = n % 100;
    return n + (s[(v - 20) % 10] || s[v] || s[0]);
};

$scope.getCollection = function(size) {
    return new Array(size);
};

A working plunker: https://plnkr.co/edit/AMc4vamjMsTdbc8eK7a7?p=preview

I based this off of the example from the website (https://angular-ui.github.io/bootstrap/#!#buttons). However, even with this example the uib-uncheckable tag does not work either.

http://stackoverflow.com/questions/16443873/angular-ui-bootstraps-radio-buttons-act-strange-with-ng-repeat — svarog, May 01 '17 at 19:16
Thanks, however, for this it requires using the $parent directive. — Sebastian, May 01 '17 at 19:20

score 2 · Accepted Answer · answered May 01 '17 at 19:21

To solve this problem, the $parent directive has to be used. This maps to the the scope containing the current scope.

<div class="panel-body">
    <div class="btn-group">
        <label class="btn btn-default" ng-model="$parent.currentSelection" uib-btn-radio="$index" ng-repeat="val in getCollection(selections) track by $index" uncheckable>{{getOrdinal($index + 1)}}</label>
    </div>
</div>

uib-btn-radio not working with ng-model

1 Answers1