Select with ng-change causing all select fields automatically changed

Question

I know that the title is a bit confusing but I've done my best to describe it in a sentence. I want to use angular ng-change in select fields built with CodeIgniter. These selects are generated from an array. Everything is OK except these selects automatically select the same value for all select fields when I change one of them.

<?php $i=1; foreach ($data as $d) : ?>
Username: <input type="text" value="<?php echo $d->username ?>" /><br/>
Person: 
  <select ng-model="formData[<?php echo $i ?>].id" ng-change="updateUser()">
    <option value="1">Nina</option>
    <option value="2">Naila</option>
    <option value="3">Noni</option>
  </select><br/>
<?php $i++; endforeach; ?>

So when I change the select by choosing Nina in first select field, for example, then all select fields automatically selects option Nina.

UPDATE: In controller:

    angular.module('myApp')
.controller('userCtrl', function($scope,$http){

   $scope.formData = {};
   $scope.updateUser = function(){
      for (var i=1; i < $scope.formData.length; i++){
         console.log($scope.formData[i]);
      }
   }

With this, I got nothing when I examine it in console.

I tried to add attribute name=id[] on select but still no luck. Please help. Thanks.

Answer 1

I would avoid mixing php views together with AngularJS, but as you can't change that you can try making your model index based (Since as I mentioned in the comment, the problem here is using the same ngModel for the all select elements). Something like this could work:

<?php $index = 0; ?>
<?php foreach ($data as $d) : ?>
Username: <input type="text" value="<?php echo $d->username ?>"/><br/>
Person:
<select ng-model="formData[<?php echo $index ?>].id" ng-change="updateUser()">
    <option value="1">Nina</option>
    <option value="2">Naila</option>
    <option value="3">Noni</option>
</select><br/>
<?php $index++; ?>
<?php endforeach; ?>