AngularJS面板中的当前日期

Question

我有一个datepicker面板，显示我选择的日期。我有一个开始日期和结束日期。当我单击面板上的按钮时，模态打开，我可以选择开始日期和结束日期。默认情况下，当我进入页面时，在从模态中选择日期之前不会显示任何内容。我的想法是，我想要的是，当我进入面板中的页面时，应该显示今天的日期。

这是面板的代码：

 <div class="row">
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                {{card}}
            </div>
            <div class="panel-body">
             <div class="row"> 
                    <div class="col-lg-12">
                        <p>{{DatePickerCtrl.chosenStartDate | date : 'longDate'}} -
                            {{DatePickerCtrl.chosenEndDate | date : 'longDate'}} 
                            </p>
                    </div>


                    </div>
                    </div>

                        <a href ng-click="footerLinkClicked()"> 
                            <div class="panel-footer">
                                <span class="pull-left">Select Date</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
    </div>
</div> 
</div>

控制器：

angular.module('opp').directive('datePickerDirective',function($mdDialog, $rootScope, $filter){
    return {
        restrict: 'E',
        templateUrl:'/picker-select/picker-select.html',
        scope: {
            card: '='

        },

        controller:function($scope){
            var self = this;


            $rootScope.$on("dateWasChosen", function(){
                self.chosenStartDate = JSON.parse(localStorage.getItem('chosenStartDate'));
                self.chosenEndDate = JSON.parse(localStorage.getItem('chosenEndDate'));
            });         

             $scope.footerLinkClicked  = function(){                
                $mdDialog.show({
                    controller : datePickerController,
                    templateUrl : '/picker-select/picker-modal.html',
                    parent : angular.element(document.body),
                    clickOutsideToClose:true
                }).then(function(answer) {
                    console.log("Fff");
                }, function() {
                });    
            }

        },

        controllerAs: 'DatePickerCtrl'

    }

})

function datePickerController($scope, $mdDialog, $rootScope, datePickerFactory, $filter){
    console.log("");
    $scope.startDateL = new Date();
    $scope.endDateL = new Date();



    $scope.close = function() {
        $mdDialog.hide();
        console.log("closing");
    }

    $scope.setDate = function(startDate, endDate) {
        $rootScope.startDate = $scope.startDateL;
        $rootScope.endDate = $scope.endDateL;

        var stDate = $filter('date')($rootScope.startDate,'yyyy-MM-dd');
        var enDate = $filter('date')($rootScope.endDate,'yyyy-MM-dd');

        console.log(stDate);
        console.log(enDate);

        intrvl = localStorage.getItem("interval");
        if (intrvl != null || intrvl != undefined || intrvl != 'null') {
            localStorage.setItem("interval",'D');
        }
        var interval = localStorage.getItem("interval");

        datePickerFactory.save({interv: interval, sDate: stDate, eDate: enDate}, function(){
        })

        localStorage.setItem('chosenStartDate', JSON.stringify($rootScope.startDate));
        localStorage.setItem('chosenEndDate', JSON.stringify($rootScope.endDate));
        $rootScope.$broadcast("dateWasChosen");
        $mdDialog.hide();

    }

}

和模态：

  <!-- Modal -->
 <md-dialog aria-label="Date Picker">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">{{modalTitle}}</h4>
        </div>
        <!-- /.modal-header -->
        <div class="modal-body">
            <md-input-container flex> <input type="date"
                ng-model="startDateL"> </md-input-container>
            <md-input-container flex> <input
                type="date" ng-model="endDateL"> </md-input-container>
            <!-- /.modal-search-box -->

                <md-button ng-click="setDate()" class="md-primary">Update Date</md-button>
            </div>


<!-- /.modal-body -->
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</md-dialog>
<!-- /.modal -->