title: Angularjs dynamic add and remove input
body: <p><br>
  My code on <a href="http://jsfiddle.net/r23Sn/28/" rel="nofollow">jsfiddle</a>.<br></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
    &lt;input&gt;
    &lt;button ng-click='add()'&gt;Add&lt;/button&gt;
    &lt;br/&gt;
    &lt;b&gt;Items Added Below&lt;/b&gt;
    &lt;div ng-repeat='item in items'&gt;
      &lt;input ng-model='item' id='item-{{$index}}' class='input-{{$index}}'/&gt;
      &lt;button ng-click='del($index)'&gt;DEL&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Angular Controller</strong></p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  function MyCtrl($scope) {
    $scope.items = [];
    $scope.newitem = '';
    $scope.add = function(){
      if ($scope.items.length &lt; 4) {
        $scope.items.push($scope.newitem);
      }
    }
    $scope.del = function(i){
      $scope.items.splice(i,1);
    }
  }
  </code></pre>
  
  <p>I try to dynamic add input by ng-click and remove specific but always delete last input..<br>
  I think its because they are not distinguish in items array.<br>
  How I can fix this ?</p>