Bagaimana cara menghapus baris tambahan tambahan untuk JSON yang dihasilkan pada klik tombol menggunakan AngularJS atau JavaScript?

Saya melakukan beberapa operasi seperti Add dan Remove untuk dua file JSON data saya.

Persyaratan saya adalah saya perlu menambahkan masing-masing json names and show them ke dalam tabel dan kemudian perlu membuat objek json untuk nama added/selected json pada button klik. Ini berfungsi dengan baik (saya dapat menampilkan json names saya di tabel UI dan dapat get/generate objek data json untuk selected/added data nama json saya setelah button klik).

Namun, masalahnya adalah: setelah membuat objek json atau setelah mengklik tombol Send, saya dapat melihat bahwa one row is adding extra on my UI table after clicking of Send button, I don't need this added extra row for my UI table, saya hanya memerlukan apa pun yang saya tambahkan nama json, hanya nama tersebut yang harus ditampilkan di tabel saya setelah mengklik tombol Send. Ini terjadi pada dua tabel json saya. (Saya memiliki dua tombol Kirim satu per satu, satu untuk JSON Pertama dan lainnya untuk JSON Kedua).

Saya tidak yakin apa yang salah di sini? Tolong bantu saya untuk menampilkan nama json yang dipilih dalam tabel saat klik tombol, itu tidak boleh menyertakan satu baris tambahan yang ditambahkan menggunakan AngularJS atau JavaScript. Terima kasih sebelumnya ! Plnkr telah dibuat.

html:

<div>   
<p>First Table:</p>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Add</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key, value) in myFirstJson.Testing">
                <td>{{getKey(value)}}</td>
                <td><button ng-click="addFirst(value)">Add</button></td>
            </tr>
        </tbody>
    </table>
    <br> <br>

    <table border="1" class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key, value) in firstJsonNames track by $index">
                <td>{{getKey(value)}}</td>
                <td><button ng-click="deleteFirst($index)">Delete</button></td>
            </tr>
            <tr ng-hide="firstJsonNames.length > 0">
                <td colspan="3">
                    <p>No Names</p>
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <table>
        <tbody>
            <tr>
                <td>First Dropdown:<select ng-model="firstJsonNames.firstdropdown">
                        <option value="Test1">Test1</option>
                        <option value="Test2">Test2</option>
                        <option value="Test3">Test3</option>
                </select><br />
                </td>
            </tr>

            <tr>
                <td>First Input:<input type="text" maxlength="50" size="50"
                     ng-model="firstJsonNames.firstInput" /> <br /></td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <button ng-click="generateFirstJson()">Send</button>

    <br>
    <br><p>Second Table:</p>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Add</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="(key, value) in mySecondJson.MyTest">
                <td>{{value.Main.static.name}}</td>
                <td><button ng-click="addSecond(value.Main.static.name)">Add</button></td>
            </tr>
        </tbody>
    </table>
    <br>
    <br> 

    <table border="1" class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="name in secondJsonNames">
                <td>{{name}}</td>
                <td><button ng-click="deleteSecond(name)">Delete</button></td>
            </tr>
            <tr ng-hide="mySecondJson.MyTest.length">
                <td colspan="3">
                    <p>No Names</p>
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <label>Enter Second Input Data:</label> <input
        ng-model="secondJsonNames.SecondInput" placeholder="Input Text"><br>
    <br>
    <button ng-click="generateSecondJson()">Send</button>
    <br>
    <br>


</div>

aplikasi.js:

var app = angular.module('myApp', ['ui.router']);
    app.controller('TestCtrl',function($scope, $http,$state,$stateParams,filterFilter,$rootScope) {
      $rootScope.firstJsonNames = [];
      $scope.secondJsonNames = [];
      $scope.firstJsonNames.firstdropdown="Test1";
      $scope.firstJsonNames.firstInput="1.5";

        if($rootScope.myFirstJson == undefined)
        {
            $http.get('test.json').success(function(response) {
                $rootScope.myFirstJson = response;
            });
        }    
          $scope.addFirst = function (name){
            $rootScope.firstJsonNames.push(name);
            console.log($rootScope.firstJsonNames);
          };
           $scope.deleteFirst = function (index){
            $rootScope.firstJsonNames.splice(index,1);
          };

        $scope.getKey = function(item) {
            return Object.keys(item)[0];
          };
        $scope.generateFirstJson = function(){
           $rootScope.firstJsonNames.push({firstdropdown:$rootScope.firstJsonNames.firstdropdown, firstInput:$rootScope.firstJsonNames.firstInput});
          console.log(angular.toJson($rootScope.firstJsonNames));
       };

        //second json
          if($rootScope.mySecondJson == undefined)
        {
            $http.get('test1.json').success(function(response) {
                $rootScope.mySecondJson = response;
            });
        }
        $scope.addSecond = function (name){
            $scope.secondJsonNames.push(name);
            console.log($scope.secondJsonNames);
          };
           $scope.deleteSecond = function (name){
             index = $scope.secondJsonNames.indexOf(name);
             $scope.secondJsonNames.splice(index,1);
          };

        $scope.generateSecondJson = function(){
          $scope.secondJsonNames.push({SecondInput:$scope.secondJsonNames.SecondInput});
          console.log(angular.toJson($scope.secondJsonNames));
        };
    });
   app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'main.html',
            controller: 'TestCtrl',
        });
  });