selectors is null

[vectorderivative]

I'm using angular material current master with material-date-picker 1.1.7
I embedded two date pickers inside a BottomSheet and I got this error

Error: selectors is null
.link@http://localhost:9000/bower_components/material-date-picker/build/mbdatepicker.js:66:13
cloneAndAnnotateFn/<@http://localhost:9000/bower_components/angular/angular.js:8284:41
invokeLinkFn@http://localhost:9000/bower_components/angular/angular.js:8290:9
nodeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7800:1
compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7149:13
nodeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7795:1
compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7149:13
compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7152:13
nodeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7795:1
compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7149:13
nodeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7795:1
compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7149:13
publicLinkFn@http://localhost:9000/bower_components/angular/angular.js:7028:30
link@http://localhost:9000/bower_components/angular-material/angular-material.js:1369:18
linkElement@http://localhost:9000/bower_components/angular-material/angular-material.js:2475:25
createAndTransitionIn/</<@http://localhost:9000/bower_components/angular-material/angular-material.js:2360:27
processQueue@http://localhost:9000/bower_components/angular/angular.js:13300:27
scheduleProcessQueue/<@http://localhost:9000/bower_components/angular/angular.js:13316:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:9000/bower_components/angular/angular.js:14555:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:9000/bower_components/angular/angular.js:14371:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:9000/bower_components/angular/angular.js:14660:13
done@http://localhost:9000/bower_components/angular/angular.js:9734:36
completeRequest@http://localhost:9000/bower_components/angular/angular.js:9924:7
requestLoaded@http://localhost:9000/bower_components/angular/angular.js:9865:1
" "<mb-datepicker class="ng-isolate-scope" element-id="date1" input-class="testClass" input-name="desde" arrows="arrows" date="from" date-format="YYYY-MM-DD">

I've just set a controller for it

angular.module('thdmaterialApp')
  .controller('DashboardCtrl', function ($mdBottomSheet) {
    var vm = this;

    vm.showReportFilterBottomSheet = function ($event) {
      $mdBottomSheet.show({
        templateUrl: 'modules/dashboard/partials/reportFilter.tpl.html',
        scope: $scope,
        targetEvent: $event
      }).then(function(clickedItem) {
        alert('clicked');
      });
    }
  });

reportFilter.tpl.html

<md-bottom-sheet class="md-grid">
  <md-toolbar class="filters-toolbar">
    <div class="md-toolbar-tools">
      <md-input-container flex>
        <label>Region</label>
        <md-select ng-model="filteredRegion">
          <md-option ng-repeat="region in filters.regions" value="{{region.value}}">{{region.display}}</md-option>
        </md-select>
      </md-input-container>

      <md-input-container flex>
        <label>Store</label>
        <md-select ng-model="filteredStore">
          <md-option ng-repeat="store in filters.stores" value="{{store.value}}">{{store.display}}</md-option>
        </md-select>
      </md-input-container>

      <md-input-container flex>
        <label class="datepicker">From</label>
        <mb-datepicker element-id='date1'
                       input-class="testClass"
                       input-name="desde"
                       arrows="arrows"
                       date="from"
                       date-format="YYYY-MM-DD">
        </mb-datepicker>
      </md-input-container>
      <md-input-container flex>
        <label class="datepicker">To</label>
        <mb-datepicker element-id='date2'
                       input-class="testClass"
                       input-name="hasta"
                       arrows="arrows"
                       date="to"
                       date-format="YYYY-MM-DD">

        </mb-datepicker>
      </md-input-container>

      <md-input-container flex>
        <label>Profile</label>
        <md-select ng-model="filteredProfile">
          <md-option ng-repeat="profile in filters.profiles" value="{{profile.value}}">{{profile.display}}</md-option>
        </md-select>
      </md-input-container>
      </div>
    </md-toolbar>
</md-bottom-sheet>

Before embedding into BottomSheet everything worked. Am I missing something?
I'll try to replicate to a plunkr later as now I'm running out of time.

[vectorderivative]

The reportFilter.tpl.html bottomSheet is loaded into a dashboard.tpl.html
If I put the markup for the datepicker in that view AND the same markup on the bottomSheet everything works fine.
(BottomSheet and dashboard have the same scope and controller)
Meanwhile I'm doing this and just hiding the datepickers in the dashboard.tpl :/
I suppose I have to initialize something?

[mobinni]

element-id='date2' -> element-id="date2"
Copy the datepicker over into your own code and change the datepicker template internally to add md-input-container

<div id="dateSelectors"
     class="date-selectors"
     outside-click="hidePicker()">
    <md-input-container style="padding-bottom: 5px;">
        <label>{{'TEST' | translate}}
            <span class="text">*</span>
        </label>
        <input type="text"
               class="mb-input-field form-control"
               ng-click="showPicker()"
               ng-model="date"
               name="{{name}}">
    </md-input-container>

Maybe that helps already?

[vectorderivative]

Modified the template, still same result. And fixed the quotes thing but still getting the error. Again, adding the markup to the parent view fix this.

app.directive('mbDatepicker', [
    '$filter', function($filter) {
      return {
        scope: {
          elementId: '@',
          date: '=',
          dateFormat: '@',
          minDate: '@',
          maxDate: '@',
          inputClass: '@',
          inputName: '@',
          placeholder: '@',
          arrows: '=?',
          calendarHeader: '=?'
        },
        template: '<div id="dateSelectors" class="date-selectors"  outside-click="hidePicker()"><md-input-container style="padding-bottom: 5px;"> <label><span class="text">*</span> </label> <input name="{{ inputName }}" type="text" class="mb-input-field"  ng-click="showPicker()"  class="form-control"  ng-model="date" placeholder="{{ placeholder }}"> <div class="mb-datepicker" ng-show="isVisible"> <table> <caption> <div class="header-year-wrapper"> <span style="display: inline-block; float: left; padding-left:20px; cursor: pointer" class="noselect" ng-click="previousYear(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.year.left }}"/></span> <span class="header-year noselect" ng-class="noselect">{{ year }}</span> <span style="display: inline-block; float: right; padding-right:20px; cursor: pointer" class="noselect" ng-click="nextYear(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.year.right }}"/></span> </div> <div class="header-nav-wrapper"> <span class="header-item noselect" style="float: left; cursor:pointer" ng-click="previousMonth(currentDate)"><img style="height: 10px;" ng-src="{{ arrows.month.left }}"/></span> <span class="header-month noselect">{{ month }}</span> <span class="header-item header-right noselect" style="float: right; cursor:pointer" ng-click="nextMonth(currentDate)"> <img style="height: 10px;" ng-src="{{ arrows.month.right }}"/></span> </div> </caption> <tbody> <tr> <td class="day-head">{{ calendarHeader.monday }}</td> <td class="day-head">{{ calendarHeader.tuesday }}</td> <td class="day-head">{{ calendarHeader.wednesday }}</td> <td class="day-head">{{ calendarHeader.thursday }}</td> <td class="day-head">{{ calendarHeader.friday }}</td> <td class="day-head">{{ calendarHeader.saturday }}</td> <td class="day-head">{{ calendarHeader.sunday }}</td> </tr> <tr class="days" ng-repeat="week in weeks"> <td ng-click="selectDate(day)" class="noselect" ng-class="day.class" ng-repeat="day in week">{{ day.value.format(\'DD\') }}</td> </tr> </tbody> </table> </div> </md-input-container></div>',

[mobinni]

Could you provide me with a plunkr of the use case that breaks? That would give me a better leg to stand on if I want to diagnose the issue.