Binding ng-model to ng-repeat not working

Question

I'm trying to bind ng-model dynamically with ng-repeat, but it doesn't seem to work. input.placeholder and input.fa both work as expected, but I can't seem to bind ng-model to anything as it gives me an error.

The relevant HTML

<li class="animate-repeat" ng-repeat="input in accountInfo">
   <div class="input-group input-group-icon">
     <input type="text" placeholder="{{input.placeholder}}" ng-model="{{input.model}}"/>
     <div class="input-icon"><i class="fa {{input.fa}}"></i></div>
   </div>
</li>

My accountInfo array of objects.

$scope.accountInfo = [
  {
    model: 'user.fullName',
    placeholder: 'Full Name',
    fa: 'fa-user',
  },
  {
    model: 'user.email',
    placeholder: 'Email Address',
    fa: 'fa-envelope',
  },
  {
    model: 'user.password',
    placeholder: 'Password',
    fa: 'fa-key',
  },
  {
    model: 'user.phone',
    placeholder: 'Phone Number',
    fa: 'fa-phone',
  },
];

The error i get

error link

Please help

Answer 1

ng-model is not interpolated; you shouldn't wrap it in {{ . So,

<input ... ng-model="input.model">

should work fine.

---

Edit: Sorry, I didn't see that you were trying to dynamically set the ng-model -- my apologies.

The easiest solution would be to use references in the accountInfo , if user is available in that scope:

    $scope.accountInfo = [{
        model: user.fullName,
        placeholder: 'Full Name',
        ...

Otherwise, you can declare an object on the $scope and manually link it to the models:

// ... some place without access to `user`
$scope.accountInfo = [{
    model: 'fullName',
    placeholder: 'Full Name',
    ...

// some place with access to `user`
$scope.inputs = {
    fullName: user.fullName,
    email: user.email,
    ...
};

// html
<input ... ng-model="inputs[input.model]">

Since ng-model only accepts a reference, variations of this are essentially all you can reasonably do.