undefined

var app = angular.module('plunker', []);

app.controller('lobby', function($scope) {
  
  $scope.title = "Welcome to Lobby screen!";

  $scope.order = {};

  $scope.send = function() {
    console.log($scope.order);
  };
});

app.directive('datePicker', function() {
    return {
        templateUrl: 'datepicker.html',
        replace: false,
        restrict: 'E',
        scope: {
            ngModel: "=",
            type: "@",
        },
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            $(element).find('input').datepicker({
                dateFormat: 'dd.mm.yy',
                onSelect: function(date) {
                    scope.ngModel = date;
                    ctrl.$setViewValue(date);
                    ctrl.$render();
                    scope.$apply();
                }
            });
        }
    };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS </title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="lobby">
    Order:
    <pre>{{ order }}</pre>

    
     <date-picker type="default" type="default"  ng-model="order.startDate"></date-picker>

     <date-picker type="default" type="default"  ng-model="order.endDate"></date-picker>

     <button type="button" name="button" ng-click="send()">Send</button>

  </body>

</html>

/* Put your css in here */

<box ng-show="type=='default'">
  <input type="text" readonly>
</box>