Current date in panel AngularJS - angularjs

Question

I have a datepicker panel that displays the date I select. I have a start date and an end date. When I click the button on the panel a modal opens up and I can select the start date and the end date. By default when I enter the page nothing is displayed until I select the date from the modal. The idea is that what I want is that when I enter the page in the panel should be displayed todays date.
This is the code for the panel:
<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>
The controller:
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();
}
}
and the modal:
<!-- 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">×</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 -->