The angular jj deletes the table row does not work


When I remove table row in Angular it's removing all rows after index, I want to remove the particlar row.


<table class="table">
        <td>Date of GPA</td>
        <td>Standard GPA</td>
    <tr ng-repeat="gpa in ctrl.gpatests">
                <input ng-model="gpa[$index].date" ui-mask="99/99/9999">
            <md-select ng-model="gpa[$index].type" ng-required="true">
                <md-option ng-value="" ng-repeat="item in ctrl.dispHsGradYr">{{item.displayName}}</md-option>
            <md-select ng-model="gpa[$index].grade" ng-required="true" >
                <md-option ng-value="" ng-repeat="item in ctrl.dispHsGradYr">{{item.displayName}}</md-option>
        <td><input type="text" ng-model="gpa[$index].id"/>{{$index}}<span ng-click="removeGPAScore(gpa[$index].id)"> x </span></td>
<button class="md-raised md-primary savebtn md-button md-default-theme" ng-click="addGPAScore()" type="BUTTON" aria-disabled="false">
        <span class="ng-scope">ADD GPA</span>
{{ctrl.gpatests | json}}

removeGPAScore , addGPAScore functions

Script :

    var data = {}; ='' ; ='' ;
    data.type ='';
    data.grade ='';
    data.gpaValue ='';

    ctrl.gpatests.splice( index, 1 );

What went wrong in the script.?

Since you are splice-ing on the same array, you need to pass $index itself instead of gpa[$index].id to the removeGPAScore function. Like this,

<span ng-click="removeGPAScore($index)"> x </span>