Angular JS table with ng-repeat and radio buttons
angularjs, angularjs-ng-repeat, html-table, radio-button
Solution
You need to set a `name` propertyfor the radio buttons so they will be grouped together.
<input type="radio" name="groupName" ng-model="model.select" />
read about the name property here
Problem
I am trying to make a table using ng-repeat that has a radio button selector at the start of each row. The table looks like this: ``` <table> <tbody> <tr ng-repeat="model in modelList"> <td> <input type="radio" ng-model="model.select"></input> </td> <td>{{ model.NDPName }}</td> <td>{{ model.OEM }}</td> <td>{{ model.version }}</td> <td>{{ model.dateAdded }}</td> <td>{{ model.validUntil }}</td> </tr> </tbody> </table> ``` The ng-repeat is taking from a modelList that looks like: ``` $scope.modelList = [ { select: false, NDPName: "NDP1", OEM: "CHOAM Inc.", version: "01", dateAdded: "Jan 1, 2013", validUntil: "Jan 1, 2014", }, { select: false, NDPName: "NDP2", OEM: "Tyrell Corp.", version: "01", dateAdded: "Jan 1, 2014", validUntil: "Jan 1, 2015", }, { select: false, NDPName: "NDP3", OEM: "Stark Industries", version: "01", dateAdded: "Jan 1, 2015", validUntil: "Jan 1, 2016", }, { select: false, NDPName: "NDP4", OEM: "Monsters Inc.", version: "01", dateAdded: "Jan 1, 2016", validUntil: "Jan 1, 2017", }, { select: false, NDPName: "NDP5", OEM: "ACME Corp", version: "01", dateAdded: "Jan 1, 2017", validUntil: "Jan 1, 2018", } ]; ``` The problem I am running into is that the radio buttons are not behaving like radio buttons. They are each in a separate scope and will therefore allow multiple rows in the table to be selected. How can I fix this?