Update ngmodel from Select - angularjs

Question

We're attempting to display a customer's information based upon the contact they select. When we use ng-options it works as expected. We are, however, using Ui.Select2 and "ui-select2 is incompatible with ." So we are forced to use ng-repeat and it isn't working as expected.
JS:
var app = angular.module('App', []);
app.controller('Ctrl', function($scope){
$scope.contacts =
[ {
'CntctKey': '331518',
'Name': 'Cheryl',
'Phone': '55555115',
'PrimaryCntct': '0'
} ,
{
'CntctKey': '118431',
'EmailAddr': 'pizzamaybe#gmail.com',
'Name': "Stephanie Pizza",
'Phone': '555552255',
'PrimaryCntct': '1'
} ];
});
HTML
<h3>With ng-options</h3>
<select ng-model="contactedPerson" ng-options="contact.Name for contact in contacts"></select>
<input ng-model="contactedPerson.Phone"/>
<input ng-model="contactedPerson.CntctKey"/>
<br>
<h3>With ng-repeat</h3>
<select ng-model="contactPerson1" >
<option ng-repeat="contact in contacts" value="{{contact}}">{{contact.Name}}</option>
</select>
<input ng-model="contactPerson1"/>
<input ng-model="contactPerson1.Cntctkey"/>
http://plnkr.co/edit/9D9LTCnBOGAo2ftA1jbU
You can see that with ng-repeat it shows the object but we can't drill it into it any further.
Is there a good way to do this besides using ng-options? Thanks in advance!

Answer 1

The problem is that you are using value="{{contact}}"
This causes angular to print the object as a JSON string.
So when the value gets assigned from the ng-model in the select list, the variable is assigned a string value i.e.
"{"CntctKey":"331518","Name":"Cheryl","Phone":"55555115","PrimaryCntct":"0"}", rather than the object's itself.
This is why in your plnkr, your second field which has ng-model="contactPerson1.CntctKey" has no value, because for a string, this property is undefined.
to fix this you can just use the index of the array element to reference the object.
You can access this index by using ng-repeat's key mapping (contactKey, contact) in contacts.
Or if you are just storing everything in a flat, contiguous array (like in the example), just use ng-repeat's $index variable.
i.e.
<select ng-model="contactPerson1Index" >
<option ng-repeat="contact in contacts" value="{{$index}}">{{contact.Name}}</option>
</select>
<input ng-model="contacts[contactPerson1Index].Phone"/>
<input ng-model="contacts[contactPerson1Index].CntctKey"/>
See updated plnkr: http://plnkr.co/edit/4thQmsZamN3tt0xpscj9
for more info on key mapping and ng-repeats internal variables, see: https://docs.angularjs.org/api/ng/directive/ngRepeat