AngularJs : ng-model not binding to ng-checked for input type="radio", using with ng-repeat [duplicate]

Question

I am trying to use ng-repeat directive with track by expression, to show radio buttons, when I submit the value gets attached in the model and when I reopens the page using the values in model, the radio button does not show checked.

I have implemented same with plane string model + string values . But this time am trying with objects.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
    <form name="myForm">
        <p>New TRY</p>
        <ul>
            <li ng-repeat="i in peopleNew.person">
                <label>
            {{i}}
                    <input type="radio" ng-model="peopleServer.person"
                           name="same" ng-value="i" />
                </label>  
            </li>
        </ul>
    </form>
<div>

JS code

 angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
  $scope.peopleNew ={
   person: {
      "name": "Ringo",
      "id": "R",
     "subj": "Sci"
    } 
  }
   $scope.peopleServer= {
   person: {"name":"Ringo"}
   }
  });

As per above, I should have 4 radio buttons on the screen, I am able to select 1 and submit. And then when I again open it in my model the person have the right value which was saved thorough ng-value but still on UI i don't see the radio button as checked for name Ringo should be checked. Model have:

 $scope.peopleServer= {
    person: {name:"Ringo"}
   }

Tried Solutions

1. ng-checked expression , although I read that ng-model and ng-checked should not be used together, ideally using model binding it should be chcked.
2. explanationI read about ,ng-repeat is not rendering properly so i tried to re render forcefully but did not work.
3. Removed ng-checked from the template still did not work.
4. Track by works for string values in ng-repeat.In ng-options it worked for object values also, but then its not input element but a select element

Someone help understand, when you reload or you already have the value in model,how the radio button be selected

	angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
  $scope.peopleNew ={
   person: {
      "name": "Ringo",
      "id": "R",
     "subj": "Sci"
    } 
  }
  //uncomment for testing. 
   $scope.peopleServer= {
   person: {"name":"Ringo"}
   }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
	<form name="myForm">
		<p>New TRY</p>
		<ul>
			<li ng-repeat="i in peopleNew.person">
				<label>
            {{i}}
                    <input type="radio" ng-model="peopleServer.person"
                           name="same" ng-value="i" />
				</label>  
			</li>
		</ul>
    </form>
<div>

automatically ? all my tries above are not working am i missing something.

Unpopular

using angularjs 1.6 , and trying to use 1.7 and will update if it fix my issue. – Unpopular

any help?? Its not the issue with version I checked – Unpopular

@georgeawg ::Thanks for modifying. Do you have any suggestion for me to try? I do not think it is duplicate.There the problem is by mixing ng-model and ng-checked. Also now you have changed it to snippet more people can go over and might resolve. Earlier it was not in snippet but since you made duplicate no one can answer now. – Unpopular

I closed the question because it is unsalvagable. The question has been edited to remove ng-checked. Anyone seeking advice on "ng-model not binding to ng-checked" is better off reading the duplicate. – Zealotry

@Zealotry : now i know we should not use ng-model and ng-checked together but in my tried solution , i have removed it and tried . Anyway thank you..... – Unpopular

Answer 1

You have some syntax errors, missing model values and some unnecessary markup. First, you can get rid of the ng-checked altogether. That will be handled automatically if you set your ng-model and ng-value properly. Since your objects are unique there's no need for track by.

When using AngularJS directives (such as ng-value) you do not need to use braces to reference your model values. So ng-value="{{person}}" becomes ng-value="person".

You refer to myObj.person, but there doesn't appear to be a corresponding model value. Below is an edit of the code and markup you have provided showing that it really does work to use an object as the value for your radio buttons.

angular.module('app', [])
  .controller('MyCtrl', ($scope) => {
    $scope.people = [{
      name: "John",
      id: "J"
    }, {
      name: "Paul",
      id: "P"
    }, {
      name: "George",
      id: "G"
    }, {
      name: "Ringo",
      id: "R"
    }];
    $scope.myObj = {
      person: $scope.people[1]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  <form name="myForm">
    <p>Decisions</p>
    <ul>
      <li ng-repeat="person in people">
        <label>
            {{ person.name }}
            <input type="radio" ng-model="myObj.person"
                   name="sameName" ng-value="person" />
        </label>
      </li>
    </ul>
  </form>
  <div>
    {{ myObj.person }}
  </div>
</div>

Near

looks working here, I see person: $scope.people[1] may be its my angular version.Can it be issue with rendering? am using ngIf for template to load based on condition. – Unpopular

Sorry i need to update the code snippet. I did not write down use case properly, the way you explaining is working but my use case /or saw what i wanted to as was different. Can you take a look at it now. Thanks – Unpopular

please help now – Unpopular