why is ng-model not checking default radio button?

Question

Below is the fiddle i am working:

http://jsfiddle.net/3c0dxf4d/

The ng-model has an object and the ng-value maps to object, why is my default value {"id":1,"name":"Bill"} not getting selected by default.

Answer 1

Check out this fiddle http://jsfiddle.net/roz98eda/

 var app = angular.module("app", []); app.controller("ctrl", function($scope) { $scope.customers = [{ "id": 1, "name": "Bill" }, { "id": 2, "name": "Bob" }, { "id": 3, "name": "Biff" }]; $scope.customer = {}; $scope.currentCustomer = { "id": 1 }; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="ctrl"> <table> <tr ng-repeat="theCustomer in customers"> <td> <input type="radio" ng-model="$parent.currentCustomer.id" ng-value="theCustomer.id">{{theCustomer.name}}</td> </tr> </table> <br> <div>{{currentCustomer}}</div> </div> </div> 

Answer 2

Because you've put the initial value to $scope.currentCustomer = { "id": 1, "name": "Bill" };

Just remove or change it. Please check following code please.

app.controller("ctrl", function ($scope) { $scope.customers = [{ "id": 1, "name": "Bill" }, { "id": 2, "name": "Bob" }, { "id": 3, "name": "Biff" }]; $scope.customer = {};

*$scope.currentCustomer = {
    "id": 1,
    "name": "Bill"
};*

})

Answer 3

Change

<input type="radio" ng-model="$parent.currentCustomer" name="foo" ng-value="theCustomer" id="{{theCustomer.id}}">

To

<input type="radio" ng-model="$parent.currentCustomer.id" name="foo" ng-value="theCustomer.id" id="{{theCustomer.id}}">{{theCustomer.name}}</td>

From ng-value docs

It is mainly used on input[radio] and option elements, so that when the element is selected, the ngModel of that element (or its select parent element) is set to the bound value.