Set input value after option is set - angularjs

Question

I have option and input field:
<div data-ng-repeat="person in persons">
<select ng-model="person.username" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="person.house" readonly="" required="">
<div ng-if="person.username">Full selected user info : {{ person.username | json}}</div>
</div>
I want to set input variable every time option is chosen.
Here is fiddle. It works fine if I remove data-ng-repeat="person in persons" But I need to be able to add few option fields.

Answer 1

Try this below code
<div ng-app="myApp" ng-controller="DemoCtrl">
<br><br>
<button ng-click="addNewChoice()">Add User</button>
<div data-ng-repeat="person in persons">
<select ng-model="person.username" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="person.username.hname" readonly="" required="">
<div ng-if="person.username">Full selected user info : {{ person.username | json}}</div>
</div>
</div>
The change is in the below line
<input type="text" ng-model="person.username.hname" readonly="" required="">
You were referencing to invalid value. The variable person.username was not pointing anywhere and hence it was not working.

Answer 2

<div ng-app="myApp" ng-controller="DemoCtrl">
<br><br>
<button ng-click="addNewChoice()">Add User</button>
<div data-ng-repeat="person in persons">
<select ng-model="selectedPerson" ng-options="item as item.username for item in usernames" ng-change="fillInput()"></select>
<input type="text" ng-model="selectedPerson.hname" readonly="" required="">
<div ng-if="selectedPerson">Full selected user info : {{ selectedPerson | json}}</div>
</div>
</div>
Try this! http://jsfiddle.net/xr82a1gL/18/