AngularJS - Bootstrap Material Datetimepicker not working

Question

I am using this datetimepicker for my angularjs project. Included jquery, moment, datetimepicker in the head tag. My input is inside ng-repeat and I initialized the datetimepicker in the controller. But still, it's not showing when I click on the input. Here is my Code -

HTML

<div class="numeric-type" ng-show="f.type == 'dateBased_filter'">
    <input type="text" id="date">
</div>

JS

setTimeout(function(){
    $('#date').bootstrapMaterialDatePicker({
        format: 'D MMM YYYY',
        year: true,
        date: true,
        time: false,
        clearButton: true,
        maxDate: moment()._d,
        change: function(event, date){
            console.log(event);
            console.log(date);
        }
    });
},2000);

Answer 1

Check this codepen straight from the angularjs material components https://codepen.io/anon/pen/rvQojz

docs https://material.angularjs.org/latest/api/directive/mdDatepicker

html

<md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
  <div layout-gt-xs="row">
    <div flex-gt-xs="">
      <h4>Standard date-picker</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"></md-datepicker>
    </div>

    <div flex-gt-xs="">
      <h4>Disabled date-picker</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" disabled=""></md-datepicker>
    </div>
  </div>

  <div layout-gt-xs="row">
    <div flex-gt-xs="">
      <h4>Opening the calendar when the input is focused</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-open-on-focus=""></md-datepicker>
    </div>

    <div flex-gt-xs="">
      <h4>Date-picker that goes straight to the year view</h4>
      <md-datepicker ng-model="ctrl.myDate" md-current-view="year" md-placeholder="Enter date"></md-datepicker>
    </div>
  </div>

  <div layout-gt-xs="row">
    <div flex-gt-xs="">
      <h4>Custom calendar trigger</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-is-open="ctrl.isOpen"></md-datepicker>
      <md-button class="md-primary md-raised" ng-click="ctrl.isOpen = true">Open</md-button>
    </div>

    <div flex-gt-xs="">
      <h4>Date-picker that only allows for the month to be selected</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-mode="month"></md-datepicker>
    </div>
  </div>
</md-content>

javascript

angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function() {
  this.myDate = new Date();
  this.isOpen = false;
});