datepicker.html

<div class="dropdown">
<a id="{{id}}" class="dropdown-toggle {{id}}"
   role="button" data-toggle="dropdown" data-target="#" href="#">
  <div class="input-group">
    <input type="text" class="form-control" value="{{datetime.format(dateFormat)}}">
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
  </div>
</a>
<ul ng-if="minView" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  <datetimepicker data-ng-model="datetime"
    data-datetimepicker-config="{ minView:'{{minView}}', startView:'{{startView}}', minuteStep: {{minuteStep}} }"
    data-on-set-time="onSetTime(newDate, oldDate)"></datetimepicker>
</ul>
</div>

datetimeInput.js

  .directive('datetimeInput', function() {
    return {
      restrict: 'EA',
      template: require('./datetimepicker.html'),
      scope: {
        datetime: '=datetime',
        setCallback: '=setCallback'
      },
      link: function(scope, element, attrs) {
        scope.id = attrs.id
        scope.minView = attrs.minView || 'day'
        scope.startView = attrs.startView || 'day'
        scope.minuteStep = attrs.minuteStep || 30
        scope.dateFormat = attrs.dateFormat || 'YYYY MMM DD'
      },
      controller: function($scope, $element, $attrs) {

        $scope.onSetTime = (newDate, oldDate) => {
          if ($scope.setTimeCallback)
            scope.setTimeCallback(newDate, oldDate)
          $element.find('.dropdown').removeClass('open')
          $scope.datetime = moment(newDate)
        }

      }
    };
  })