Как удалить дополнительную добавленную строку для сгенерированного JSON при нажатии кнопки с помощью AngularJS или JavaScript?

Я выполняю несколько операций, таких как Add и Remove, для двух моих файлов JSON данных.

Мое требование состоит в том, что мне нужно добавить соответствующие json names and show them в таблицу, а затем нужно сгенерировать объект json для имен added/selected json при щелчке button. Он работает нормально (я могу показать свой json names в таблице пользовательского интерфейса и могу get/generate объект данных json для моих selected/added данных имен json после button клика).

Но проблема в том, что после создания объекта json или после нажатия кнопки Send я вижу, что 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 мне нужно только то, что я добавил имена json, только те, которые должны отображаться в моей таблице после нажатия кнопки Send. Это происходит для двух моих таблиц json (у меня есть две кнопки «Отправить» по отдельности, одна для первого JSON, а другая для второго JSON).

Я не уверен, что здесь не так? Пожалуйста, помогите мне, чтобы отображать выбранные имена json в таблице при нажатии кнопки, которые не должны включать одну дополнительную строку, добавляющую либо с использованием AngularJS, либо JavaScript. Заранее спасибо ! Создан Plnkr.

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>

приложение.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',
        });
  });