uib-btn-radioがng-modelで動作しない

Question

ui-bootstrapでラジオボタンの動的セットを作成しようとしていますが、次のコードで、ラジオボタンを選択するとモデル変数が更新されず、チェックボックスのように動作するようです。

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); 
}; 

作業plunker：https://plnkr.co/edit/AMc4vamjMsTdbc8eK7a7?p=preview

私はウェブサイト（https://angular-ui.github.io/bootstrap/#!#buttons）から例のオフにこれをベース。しかし、この例でも、uib-uncheckableタグは動作しません。

Answer 1

この問題を解決するには、$parentディレクティブを使用する必要があります。これは、現在のスコープを含むスコープにマップされます。

<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>