Updating ngModel of radio buttons in Angular.js

Question

I am trying to implement a web-based table with Angular.js such that each row can be selected with a radio button. The rows can be swapped up or down and the selection state should be swapped together with the rows. So far, new rows can be added, the row swapping works just fine, and the scope variable of the selected row index is updated upon user's click on radio buttons.

The problem that I encountered is that the selected state of radio buttons and the scope variable is not in sync. More specifically, while the scope variable is correctly updated during the row swapping, the radio buttons are usually deselected after swapping. It can also happen that the selected radio button is different from the index in the scope variable.

Any suggestions on how to fix this problem would be welcome!

A JSFiddle of what I have implemented so far can be found here:

http://jsfiddle.net/7jeume9r/38/

HTML Code

<div ng-controller="SelectTableController">
<table id="select-table">
<thead>
    <tr>
        <th> Text </th>
        <th> Select? </th>
        <th> </th>
        <th> </th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in entries">
        <td> {{x['text']}} (id: {{$index}}) </td>
        <td> <input type="radio" ng-model="$parent.selectedchoice" name="selectedchoice" value="{{$index}}"/> </td>
        <td>
            <button type="button" ng-click="moveUpEntry(x)" ng-show="$index > 0"> Move up </button> 
            <button type="button" ng-click="moveDownEntry(x)" ng-show="$index < entries.length-1"> Move down </button>
        </td>
    </tr>
</tbody>
</table>

<div>
    <input type="text" ng-model="newtext"> </input>
    <button type="button" ng-click="addEntry()"> Add </button>
</div>
<div> <tt> Selected Choice: {{selectedchoice}} </tt> </div>
</div>

Javascript / Angular.js Code

angular.module('DemoApp', []).controller('SelectTableController', function($scope) {
$scope.entries = [{text:"abc"}, {text:"def"}]
$scope.selectedchoice = '-1'

$scope.addEntry = function() {
    var text = $scope.newtext
    $scope.entries.push({text: text})
    $scope.newtext = ""
}

$scope.moveUpEntry = function(entry) {
    var index = $scope.entries.indexOf(entry)
    if (index > 0 && index < $scope.entries.length) {
        $scope.entries.swap(index,index-1)
        if ($scope.selectedchoice == index)
            $scope.selectedchoice = index-1
        else if ($scope.selectedchoice == index-1)
            $scope.selectedchoice = index
    }
}

$scope.moveDownEntry = function(entry) {
    var index = $scope.entries.indexOf(entry)
    if (index >= 0 && index < $scope.entries.length-1) {
        $scope.entries.swap(index,index+1)
        if ($scope.selectedchoice == index)
            $scope.selectedchoice = index+1
        else if ($scope.selectedchoice == index+1)
            $scope.selectedchoice = index
    }
}

Array.prototype.swap = function (x,y) {
    var b = this[x];
    this[x] = this[y];
    this[y] = b;
    return this;
}
});

Answer 1

Your radio buttons should be part of the "row" and a radio button is checked with

checked="checked"

You can't check them with value as you do

<input type="radio" ng-model="$parent.selectedchoice" name="selectedchoice" value="{{$index}}"/>

I'm trying to fix your jsFiddle atm.