Using angularjs ui bootstrap datepicker and timepicker together

I'm trying to add the value of my ui.bootstrap timepicker to the date in my input (text) like so:

Not sure what my code is missing to accomplish that.

Code taken from angularjs.ui.bootstrap

Here's my plunker

Thanks

html

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

      <div class="form-group">

        <div class="col-md-6">
          <label for="appointment_start">Appointment datetime start:</label>
          <p class="input-group">
            <input type="date" id="appointment_start" name="appointment_start" class="form-control" readonly datepicker-popup ng-model="dt" is-open="status.opened" 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)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
          </p>
        </div>

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

    </div><!-- ng-controller -->
  </div><!-- ng-app -->

js

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

  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

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

  // Disable weekend selection
  $scope.enabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };


  $scope.open = function($event) {
    $scope.status.opened = true;
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

  $scope.status = {
    opened: false
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 2);
  $scope.events =
    [
      {
        date: tomorrow,
        status: 'full'
      },
      {
        date: afterTomorrow,
        status: 'partially'
      }
    ];

  $scope.getDayClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i=0;i<$scope.events.length;i++){
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  };

});