Enable / disable button based on switch selection in AngularJS

Question

I have items in the switch list (using ng-repeat ) with button (initially disabled using ng-disabled ) to continue. When the switch is selected, I want to enable the "Continue" button.

What is the correct way to do this in Angular?

Corresponding JS:

 $scope.companies = [{ "id": 3, "name": "Twitter" }, { "id": 2, "name": "Google" }, { "id": 1, "name": "Apple" }] 

Relevant HTML:

 <table> <tr ng-repeat="company in companies"> <td> <input type="radio" ng-model="companyId" name="companyId" value="{{company.id}}" />{{company.name}} </td> </tr> </table> <button ng-disabled="!companyId">Continue</button> 

Jsfiddle

Thanks!

Answer 1

ngRepeat creates a new region, which is the child region of the region used by the button. You can fix it using

 <input type="radio" ng-model="$parent.companyId" .../> 

See http://jsfiddle.net/UZkM8/1/

But the best solution would be to update an object that is already in the area:

 $scope.userChoice = {}; <input type="radio" ng-model="userChoice.companyId" .../> <button ng-disabled="!userChoice.companyId">Continue</button> 

See http://jsfiddle.net/UZkM8/3/