Angular ui.bootstrap.buttons not updating after element remove

Question

I have a set of Radio-bottoms, that is driven off a Array. for a Multi-Choice answer setup.

<div ng-repeat="option in options">
   <div>
      <button type="button" style="min-width: 100px" class="btn btn-default" ng-model="question.answer" btn-radio="'{{option.option_id}}'">{{option.option_text}}</button>
    </div>
</div>

When I add to the array, things are good, mainly since the preset answer is lower than the new element in Options.

If I then delete one of the Options above the answer, and redefined the new Answer id.. the Radio buttons are not updated correctly. I know the answer is updated as I have it displayed on the screen. but the buttons are not updated.

UPDATE NEW PLUNKER! I have done a plunker : http://plnkr.co/edit/2XWFwClewqtcXWPY8ZSK. As you can see if you select the different options the answer follows.. Now if you select the third option and remove the first or second option you will see that the answer will update but the check buttons is not updated right.

Can someone shed some light on this ? Thanks in advance Kim

Answer 1

With some genouros help from the ui team did I find that it was a simple type casting error.

$scope.cp.options[i].option_id = i + 1;

Should be

$scope.cp.options[i].option_id = "" + (i + 1);

I have updated the plunker if anyone need the full sample. Here