title: Data bind input to list element in Angular
body: <p>I would like each one of my list items to be editable via the <code>input</code>. Clicking on the list item fills in the input, but how do I then specify what item to update? I have the <code>$watch</code> working.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>I have a plunker: <a href="https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=preview" rel="nofollow">https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=preview</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
  
  &lt;div ng-controller="MyController"&gt;
  
      &lt;ul ng-repeat="item in collection"&gt;
        &lt;li ng-click="edit(item.name)"&gt;{{item.name}}&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;input  name="myinput" ng-model="myinput"  /&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>var app = angular.module('myApp', [])
  
  .controller('MyController', function($scope, $http) {
  
    $scope.collection = [
        {name:'foo'},
        {name:'bar'},
        {name:'foobar'},
        {name:'barfoo'},
      ];
  
    $scope.edit = function(current_name) {
  
      $scope.myinput = current_name;
  
      console.log(current_name);
  
    }
  
    $scope.$watch('myinput', function(NewValue, OldValue) {
      console.log(NewValue);
    }, true);  
  
  })
  </code></pre>