title: How to remove specific element from ng-repeat?
body: <p>I'm having some trouble with an ng-repeat in a form.</p>
  
  <p>I have form where when I click a button, a group of input fields appear along with a remove button. I am using an ng-repeat for this. I want to be able to remove that specific group of inputs when you click the remove button. The way I have it written right now, though, clicking the remove button removes the inputs from the bottom of the list, no matter where I click. Here's a GIF to better explain it: </p>
  
  <p><a href="https://i.stack.imgur.com/qKfzY.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qKfzY.gif" alt="enter image description here"></a></p>
  
  <p>I thought it would just be a simple splice at that specific $index within the ng-repeat, but apparently not (unless there's something I'm missing).</p>
  
  <p>Here is the HTML for the ng-repeat:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label class="col-sm-2 control-label"&gt;More Parameters&lt;/label&gt;
      &lt;button type="button" ng-click="addParameterFields()"&gt;Add Parameter&lt;/button&gt;
        &lt;div class="col-sm-10 col-sm-offset-2"&gt;
          &lt;div ng-repeat="params in formData.gameIdParams track by $index" class="controls parameters"&gt;
            &lt;input type="text" ng-model="formData.gameIdParams.id[$index]"
              name="gameIdParamsId"
              class="col-sm-3"
              autocomplete="off"
              placeholder="Type of Input"
              validation-field-required="true"/&gt;
            &lt;input type="text" ng-model="formData.gameIdParams.label[$index]"
              name="gameIdLabel"
              class="col-sm-3"
              autocomplete="off"
              placeholder="Placeholder Text to add in Input Field"
              validation-field-required="true"/&gt;
            &lt;input type="text" ng-model="formData.gameIdParams.validationRegex[$index]"
              name="gameIdvalidationRegex"
              class="col-sm-3"
              autocomplete="off"
              placeholder="Regex used for Validation (optional)"
              validation-field-required="false"/&gt;
            &lt;button ng-click="formData.gameIdParams.splice($index,1)"&gt;Remove&lt;/button&gt;
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the logic I use for adding the forms:</p>
  
  <pre><code>$scope.addParameterFields = function() {
    console.log('CLICKED');
    if($scope.formData.gameIdParams === null || $scope.formData.gameIdParams === undefined) {
      $scope.formData.gameIdParams = [];
    }
    $scope.formData.gameIdParams.push({
      id: "",
      label: "",
      validationRegex: ""
    });
    console.log($scope.formData);
  };
  </code></pre>
  
  <p>Thanks in advance for any help!</p>