Copy values from object array to input fields in AngularJS
<p>I have an array like this:</p>

<pre><code>[
 {
  name: "simon",
  surname: "Bi"
 },
 {
  name: "Frank",
  surname: "Bour"
 }
]
</code></pre>

<p>I print all data in a table and I want to edit this values:</p>

<pre><code>name1 - surname1 - edit1 - remove1
name2 - surname2 - edit2 - remove2
</code></pre>

<p>When I press "edit", I want to copy the user's data to input fields (so just 2 fields, name and surname), so I can change data and update the array but I don't know how to that in AngularJS.</p>

<p>JS:</p>

<pre><code>angular.
   module('peopleList').
   component('peopleList', {
      templateUrl: "list.template.html",
      controller:
            function peopleListController(){
                var self = this;

                self.people = [
                    {
                        name: "Simon",
                        surname: "Bo",
                    }
                ];

                //add
                self.addPerson = function(itemToAdd) {
                    this.people.push(angular.copy(itemToAdd))
                }

                //remove
                self.delete = function(item) {
                    var index = this.people.indexOf(item);
                    this.people.splice(index, 1);
                }

                //edit
                self.edit = function(item){
                code
                }
            }
    });
</code></pre>

<p>HTML:</p>

<pre><code>&lt;form name="myForm" ng-submit="$ctrl.addText(form)"&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="name"&gt;Name: &lt;/label&gt;
                &lt;input id="name" type="text" class="form-control" ng-model="itemToAdd.name" placeholder="name" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label for="surname"&gt;Surname:&lt;/label&gt;
                &lt;input id="surname" type="text" class="form-control" ng-model="itemToAdd.surname" placeholder="surname" required&gt;
               &lt;button ng-click="$ctrl.addPerson(itemToAdd)" class="btn btn-primary" id="add"&gt;Add&lt;/button&gt;
            &lt;/div&gt;
&lt;/form&gt;


&lt;table&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;td&gt;Name&lt;/td&gt;
                    &lt;td&gt;Surname&lt;/td&gt;
                    &lt;td colspan="2"&gt;Actions&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr ng-repeat="person in $ctrl.people | filter:$ctrl.query | orderBy: $ctrl.orderProp"&gt;
                    &lt;td&gt;{{person.name}}&lt;/td&gt;
                    &lt;td&gt;{{person.surname}}&lt;/td&gt;
                    &lt;td class="edit" ng-click="$ctrl.edit(person)" style="cursor: pointer; text-decoration: underline;"&gt;Edit&lt;/td&gt;
                    &lt;td class="remove" ng-click="$ctrl.delete(person)" style="cursor: pointer; font-weight: bold; color: red;"&gt;X&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
</code></pre>