How to set the date value of ui bootstrap datepicker

Question

My create event page initializes my date picker to current date. That works fine. But when I want to edit the event on my edit page, i'm not sure how to set the date picker value to the event I have in my php variable.

Do I need a different angular module for that?

Any help would be greatly appreciated

HTML

<div ng-app="ui.bootstrap.demo">
<div ng-controller="DatepickerDemoCtrl">

<?php
// How to set date picker to value of $event->event_start
// $event->event_start
?>

<p class="input-group">
  <input type="text" id="dt_start" class="form-control" readonly datepicker-popup="@{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>
</p>

<timepicker
  ng-model="dt1"
  hour-step="1"
  minute-step="15"
  show-meridian="true">
</timepicker>

JS

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('DatepickerDemoCtrl', function ($scope) {

  $scope.today = function() {

    var dt1 = new Date();
    dt1.setHours( dt1.getHours() + 1 );
    dt1.setMinutes( 0 );
    $scope.dt1 = dt1;
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt1 = null;
  };

Updated HTML and JS with Alan Tsai's suggestion - still not working as expected - datepicker working, but timepicker still empty

See plunker

HTML

<?php  
    $dateeventstart = new DateTime($event->event_start);
?>  

<div ng-app="ui.bootstrap.demo">

<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('<?php echo $dateeventstart->format("Y-m-d H:i") ?>', '<?php echo $dateeventstart->format("Y-m-d H:i") ?>'">)

<?php
// How to set date picker to value of $event->event_start
// $event->event_start
?>

<p class="input-group">
  <input type="text" id="dt_start" class="form-control" readonly datepicker-popup="@{{format}}" ng-model="dt1" is-open="opened1" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event,'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>
</p>

<timepicker
  ng-model="tm1"
  hour-step="1"
  minute-step="15"
  show-meridian="true">
</timepicker>

HTML source (controller)

<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('2015-09-02 12:15', '2015-09-02 12:15')">

JS

angular
  .module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
  .controller('DatepickerDemoCtrl', function ($scope) {

  $scope.today = function() {

    var dt1 = new Date();
    dt1.setHours( dt1.getHours() + 1 );
    dt1.setMinutes( 0 );
    $scope.dt1 = dt1;
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt1 = null;
  };

  $scope.initModel = function(datePickerValue, timePickerValue){
     $scope.dt1 = datePickerValue;
     $scope.tm1 = timePickerValue; 
  }

Answer 1

I don't know php, but you can use ng-init to set the value from server side into angular, such

<div ng-controller="DatepickerDemoCtrl" ng-init="dt1 = <?= $event_start?>">

I am not sure if <?= $event_start?> is how php output the variable to html - if not just change to what ever syntax for outputting variable.

Edit

If that still not work, it maybe because the variable you output it not correct datetime string. if so, you can create a function which parse the pass in string . To achieve this, can look at this SO answer

AngularJS ngInit with Date

Edit 2 Regards to timepicker problem

After close look, there is two thing you will have to change:

1. I realize your datePicker and timepicker are using the same ng-model (both set to dt1 ), you should set the 2 to different ng-model.

2. Since now you are setting two ng-model (one for datepicker and one for timepicker), it is better to call a method in ng-init instead of setting property directly as I have shown previously, this means:

In your Controller, declare a init method:

$scope.initModel = function(datePickerValue, timePickerValue){
   $scope.dt1 = datePickerValue;
   $scope.dt2 = timePickerValue; // assuming your timepicer model is dt2
}

then in your controller, call init as (assume your tiempicker is called timeeventstart):

<div ng-controller="DatepickerDemoCtrl" ng-init="initModel('<?php echo $dateeventstart->format("Y-m-d H:i") ?>', '<?php echo $timeeventstart->format("Y-m-d H:i") ?>'">)

Edit 3

I think it could be because the data is passed in as string not date. Try convert it to date such as:

  $scope.initModel = function(datePickerValue, timePickerValue){
     $scope.dt1 = new Date(datePickerValue);
     $scope.tm1 = new Date(timePickerValue); 
  }

Edit 4

After look at the plunker link you provided, it seems to work perfectly. Below is a image showing I change the init time and it reflects the view: