We Keep Coding

Remove auto select of radio button in ng-repeat Angular

I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.

Try $scope.availableBankAccounts.length>=1
Should work

You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"

How to force radio buttons to remain checked when checking another radio buttons field?

Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !

Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !

Angular ngRepeat - How to have multiple objects containing radio buttons

I am doing some updates to a clients Ionic app but stuck on some binding.
There is a form with some fields including a couple of radio buttons.
E.g.
<div class="fields">
<input ng-model="student.name" type="text" name="student_name" id="name" />
<input ng-model="student.has_booked" type="radio" checked="checked" name="made_booking" id="made_booking_yes" value="1" />
</div>
The request for the update is to have a button that duplicates the details in this first form and add its to an array where the details can be used for another student as they are normally similar.
To do this I have a button that calls this method:
$scope.additionalStudents = []; // <-- for context of question
$scope.duplicateStudentDetails = function() {
var firstStudent = angular.copy($scope.student);
$scope.additionalStudents.push(firstStudent);
}
Then in my view:
<div class="fields" ng-repeat="(key, student) in additionalStudents track by $index">
<input ng-model="student.name" type="text" name="student_name" id="name" />
<input ng-model="student.has_booked" type="radio" checked="checked" name="made_booking" id="made_booking_yes" value="1" />
</div>
The issue I am having is that the name came be changed independently, but the checkbox always affects the original student. Im guessing this is because of the name attribute...
How do I go around this?

There might be two solutions to your problem.
If your case is just to show the status and not to change the booking status
Then, remove name attribute
If you want change the booking status in future
Better to have input of type checkbox with different names

AngularJS - Radio button not checked

I have an ng-repeat with a bunch of radio buttons inside:
<div class="panel panel-default" ng-repeat="offer in vm.offerList">
...
<td ng-show="offer.edit">
<div class="row">
<input type="radio" name="before" ng-model="offer.before" value="false">
<input type="radio" name="before" ng-model="offer.before" value="true">
</div>
</td>
...
</div>
The model offer.before has the correct value, however, when the row is shown, the radio button doesn't appear checked. Why is this happening? I need the radio button to show the selected value.
This is a fiddle example of my problem: http://jsfiddle.net/danielrvt/dpoLdgjq/

Because anything inside attribute value gets toString() like value true will be considered as 'true' & it will looks for 'true'(string) instead of true(boolean).
Better use ng-value instead of value attribute. It will treat true value as in true of type boolean only.
Additionally in your case you have to add name attribute to be unique for each radio button group each offer element radio will be considered as unique form element.
Markup
<div class="row">
{{offer.before}}
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="false">
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="true">
</div>
Forked Fiddle

ng-model not updating for radio button

So I have a radio button whose model is needed by the function that is called when I hit the button below it:
<form class="form-inline" role="form">
<div class="form-group">
<div>
<input type="radio" ng-model="display" value="true">True <input type="radio" ng-model="display" value="false">False
</div>
<button>
....
</button>
</div>
</form>
However, the results never come back right. If I go in and debug the code, within the javascript every single time the damn value of $scope.display is "true". It doesn't have to do with me not using ng-value, based on what I have read about it, right? Previously, this element worked correctly and was not in a form/form-inline/form-group, but a simple div. Does that have something to do with it?

it does work here is a pluncker: pluncker
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="display" value="true">true
<input type="radio" ng-model="display" value="false">
false
<br>
display = {{display}}