datepicker scroll mask fails when datepicker is inside a modal

[ghost]

DatePicker's have an associated md-scroll-mask, z-index=50, which blocks scrolling of the background while the dp is open. DatePicker's have z-index=100. However, modals have z-index 50 < z < 99. A datepicker inside of a modal will not prevent scrolling in the modal funky stuff happens.

Sample: http://codepen.io/beezus/pen/grjMQV

Here's what I did to make this work for now. I overrode and inherited the dp directive and updated the mask's z-index. I didn't dig deep enough to see how all of these things work to devise a better solution.

angular
  .module('material.components.datepicker')
  .directive('mdDatepicker', function() {
      return {
          restrict: 'E',
          require: [
            '?mdDatepicker'
          ],
          link: function(scope, iElm, iAttrs, controllers) {
              var datePickerCtrl = controllers[0];

              scope.$watch(
                function() {
                    return datePickerCtrl.isCalendarOpen
                },
                function(isCalOpen) {
                    var mask = document.querySelector('.md-scroll-mask');
                    if (mask) {
                        mask.style.zIndex = (isCalOpen ? '99' : '50');
                    }
                }
              );
          }
      };
  });

[crisbeto]

Thanks for the report, I could reproduce it as well.