Angular-datepicker: Get Ng-model Value Into Scope

I'm new to AngularJs and I want to show the selected date and time of my datepicker in a <pre> tag by the scope of the ng-model="abc".

angular-datepicker (github), angular-datepicker (demo)

Html:

<div class="container">
    <div class="row">
      <div class="col-md-4">
        <div ng-controller="foo">
          <input type="datetime" class="form-control" date-time ng-model="myDate" format="dd-MM-yyyy HH:MM" placeholder="Select datetime">
          <pre>myDate: {{myDate}}</pre>
        </div>
      </div>
    </div>
  </div>

JS:

angular.module('demo', ['datePicker']).controller('foo', ['$scope', function($scope) {
  //empty
}]);

Here is a plnkr

Here's the updated plnkr - http://plnkr.co/edit/Qagb78UDqXQrabcZucr6.

To get it working, I had to make ng-model point to an object.property (myDate.value) in the input. And you can get the model value in the template like this:

<pre>
      myDate: {{myDate.value | date: "dd-MM-yyyy HH:MM"}}
</pre>

Controller:

$scope.myDate = {
        value: ''
};

Hope this answers your question. Here's the reason why ng-model need to have a dot - Does my ng-model really need to have a dot to avoid child $scope problems?.