在表格中显示所选值

Question

我有一个下拉选择栏和一个angularJS。我从选择菜单中选择一个选项，从日期选择器中选择日期，我想在表格中显示所选的值和日期。问题是表中的选择没有更新，因为它在下拉列表中，请帮忙。我对angularJS很新，我还在努力学习

link：https://jsfiddle.net/kfc5135/0h1uhd4q/

以下是相关代码：

    <script>

            angular.module('main', ['firstApplication'])
    .controller('ExampleController', ['$scope',  function ($scope) {
        $scope.data = {
            availableOptions: [
              { id: '1', name: 'A' },
              { id: '2', name: 'G' },

            ],
            selectedOption: { id: '4', name: 'Select Type' } // default value of the select

        };
        $scope.symbol = {
            symOpt: [
              { id: '1', name: 'nbasvd'},
              { id: '2', name: 'option b' },
              { id: '3', name: "optiobc' },
            ],
            selectedOpt: { id: '4', name: 'Select Type' } // default value of the select
        };
    }]);

            angular
        .module('firstApplication', ['ngMaterial', 'ngMessages'])
        .controller('dateController', dateController);

            function dateController($scope) {
                $scope.myDate = new Date();
                $scope.minDate = new Date(
                   $scope.myDate.getFullYear(),
                   $scope.myDate.getMonth(),
                   $scope.myDate.getDate());
                $scope.maxDate = new Date(
                   $scope.myDate.getFullYear(),
                   $scope.myDate.getMonth() + 2,
                   $scope.myDate.getDate());

            }

</script>

<div ng-app="main">

        <h1 style="text-align: center" id="rs" class="modal-header">Report Scheduler</h1>
        <style>
            #rs {
                background-color: papayawhip;
                color: lightblue;
            }
        </style>
        <hr />
        <div class="row">

            <div class="col-md-4">
                <div ng-controller="ExampleController">
                    <form name="myForm">
                        <br />
                        <label for="mySelect">&nbsp;&nbsp;Report Type</label>
                        <select name="mySelect" id="mySelect"
                                ng-options="option.name for option in data.availableOptions track by option.id"
                                ng-model="data.selectedOption">
                            <option value="" disabled selected>Select from options</option>
                        </select>
                    </form>

                    <tt>option = {{data.selectedOption}}</tt><br />
                </div>

            </div>

            <div class="col-md-4">
                <div ng-app="firstApplication" class="datepickerdemo" ng-controller="dateController as ctrl" ng-cloak>

                    <h4>
                        &nbsp;&nbsp;Select  Date

                        <md-datepicker ng-model="ctrl.myDate"
                                       md-placeholder="enter date"
                                       md-min-date="minDate"
                                       md-max-date="maxDate">
                        </md-datepicker>
                    </h4>
                </div>
            </div>

            <div class="col-md-4">
                <div ng-controller="ExampleController">
                    <form name="myForm">
                        <br />
                        <label for="mySelect">&nbsp;&nbsp;Symbol Type</label>
                        <select name="mySelect" id="mySelect"
                                ng-options="option.name for option in symbol.symOpt track by option.id"
                                ng-model="data.selectedOpt" ng-value="d1">
                            <option value="" disabled selected>Select from options</option>
                        </select>
                    </form>


                    <!--<tt>option = {{data.selectedOpt}}</tt><br />-->
                    </
                </div>
            </div>
        </div>

    </div>
<!--the tables where I want my details.-->
<h3>Request Details</h3>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
    <table ng-controller="ExampleController">
        <tr>
            <th>Report Type</th>
            <th>Symbol Type</th>
            <th>Date</th>
        </tr>
        <tr>
            <td><tt>d1:{{data.selectedOption.name}}</tt></td>
            <td>{{symbol.symOpt.name}}</td>
            <td>date</td>
        </tr>
   </table>