Edit Update Nested Table Parent Child Rows on Button Click in AngularJS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $window) {
        $scope.Customers = [
            {
                Name: "John Hammond", Country: "United States",
                Orders: [
                    { OrderId: 10248, Freight: 32.38, ShipCountry: 'France' },
                    { OrderId: 10249, Freight: 12.43, ShipCountry: 'Japan' },
                    { OrderId: 10250, Freight: 66.35, ShipCountry: 'Russia' }
                ]
            }
        ];

        $scope.Orders = [];
        $scope.Add = function () {
            //Add the new item to the Array.
            var customer = {};
            customer.Name = $scope.Name;
            customer.Country = $scope.Country;
            customer.Orders = $scope.Orders;
            $scope.Customers.push(customer);
            $scope.Orders = [];
            //Clear the TextBoxes.
            $scope.Name = "";
            $scope.Country = "";
        };
        $scope.add2 = function () {
            var items = {};
            items.OrderId = $scope.OrderId;
            items.Freight = $scope.Freight;
            items.ShipCountry = $scope.ShipCountry;
            $scope.Orders.push(items);
            $scope.OrderId = "";
            $scope.Freight = "";
            $scope.ShipCountry = "";
        }
        $scope.Remove = function (index) {
            //Find the record using Index from Array.
            var name = $scope.Customers[index].Name;
            if ($window.confirm("Do you want to delete: " + name)) {
                //Remove the item from Array using Index.
                $scope.Customers.splice(index, 1);
            }
        }
        $scope.remove1 = function (index) {
            var name = $scope.Orders[index].OrderId;
            if ($window.confirm("Do you want to delete: " + name)) {
                $scope.Orders.splice(index, 1);
            }
        }

        $scope.EditCustomer = function (data) {
            $scope.editing = true;
            $scope.selected = angular.copy(data);
        };

        $scope.SaveCustomer = function (id) {
            $scope.editing = false;
            $scope.Value[id] = angular.copy($scope.selected);
        };

        $scope.EditOrder = function (data) {
            $scope.editingOrder = true;
            $scope.selectedOrder = angular.copy(data);
        };

        $scope.SaveOrder = function (id) {
            $scope.editingOrder = false;
            $scope.Value[id] = angular.copy($scope.selectedOrder);
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Action</th>
            <th>Orders</th>
            <th>&nbsp;</th>
        </tr>
        <tbody ng-repeat="m in Customers">
            <tr>
                <td>
                    <span ng-show="edit != true">{{m.Name}}</span>
                    <input ng-show="edit" type="text" ng-model="m.Name" class="form-control" />
                </td>
                <td>
                    <span ng-show="edit != true">{{m.Country}}</span>
                    <input ng-show="edit" type="text" ng-model="m.Country" class="form-control" />
                </td>
                <td>
                    <button class="btn btn-primary" type="button" ng-show="edit != true && editing != true"
                        id="table-edit" ng-click="edit = true; EditCustomer(m)">
                        <i class="fa fa-fw fa-pencil"></i>
                    </button>
                    <button class="btn btn-primary" type="button" ng-show="edit" id="table-save" ng-click="edit = false; SaveCustomer($index)">
                        <i class="fa fa-save"></i>
                    </button>
                </td>
                <td value="{{m.subitems}}">
                    <table class="table table-bordered">
                        <tr>
                            <th>Order Id</th>
                            <th>Freight</th>
                            <th>ShipCountry</th>
                            <th>Action</th>
                        </tr>
                        <tbody ng-repeat="o in m.Orders">
                            <tr>
                                <td>{{o.OrderId}}</td>
                                <td>
                                    <span ng-show="editOrder != true">{{o.Freight}}</span>
                                    <input ng-show="editOrder" type="text" ng-model="o.Freight" class="form-control" />
                                </td>
                                <td>
                                    <span ng-show="editOrder != true">{{o.ShipCountry}}</span>
                                    <input ng-show="editOrder" type="text" ng-model="o.ShipCountry" class="form-control" />
                                </td>
                                <td>
                                    <button class="btn btn-primary" type="button" ng-show="editOrder != true && editingOrder != true"
                                        id="Button1" ng-click="editOrder = true; EditOrder(o)">
                                        <i class="fa fa-fw fa-pencil"></i>
                                    </button>
                                    <button class="btn btn-primary" type="button" ng-show="editOrder" id="Button2" ng-click="editOrder = false; SaveOrder($index)">
                                        <i class="fa fa-save"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td><input type="button" class="btn btn-danger" ng-click="Remove($index)" value="Remove" /></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td><input type="text" ng-model="Name" /></td>
                <td><input type="text" ng-model="Country" /></td>
                <td>
                    <button class="btn btn-primary" type="button" ng-model="subitems" data-toggle="modal"
                        data-target="#popup">Click</button>
                </td>
                <td><input type="button" class="btn btn-primary" ng-click="Add()" value="Add" /></td>
            </tr>
        </tfoot>
    </table>
    <div class="modal fade" id="popup" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        ×</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div class="s2vk-container">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="panel panel-default">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                                                    OrderId</th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    Freight</th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    ShipCountry</th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr style="padding-left: 20px; padding-right: 20px;" ng-model="myData2" ng-repeat="subitem in Orders">
                                                <td>{{subitem.OrderId}}</td>
                                                <td>{{subitem.Freight}}</td>
                                                <td>{{subitem.ShipCountry}}</td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-danger" ng-click="remove1($index)" readonly="readonly">
                                                        Delete</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr style="padding-left: 20px; padding-right: 20px;">
                                                <td><input type="text" class="input-sm form-control" ng-model="OrderId" /></td>
                                                <td><input type="text" class="input-sm form-control" ng-model="Freight" /></td>
                                                <td><input type="text" class="input-sm form-control" ng-model="ShipCountry" /></td>
                                                <td><button type="button" class="btn btn-primary" ng-click="add2()">Add</button></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
</div>