md-select is ignored when inside $mdDialog

Question

I'm having issues using material design element inside a material design dialog box. I want to display an md-select element that allows a user to choose from a three reasons why they are declining a request, and instead of choosing a pre-established option from within that select, a user may also leave another reason in a md-dialog textarea. However, md-select and md-option elements are being ignored, leaving only the text within the elements while the md-input-container is displaying properly.

var confirm = $mdDialog.prompt()
.title('Reason for Declining Trip')
.htmlContent(
  "<md-dialog aria-label='List dialog'>" +
  "<md-dialog-content>" +
  "  <md-select ng-model='model' placeholder='Select a reason'>" +
  "    <md-option ng-value='opt'>Scheduling Conflict</md-option>" +
  "    <md-option ng-value='opt'>Personal Conflict</md-option>" +
  "    <md-option ng-value='opt'>Hours of Service Concern</md-option>" +
  "  </md-select>" +
  "<br>" +
  "  <md-input-container class='md-block'>" +
  "    <label>Other</label>" +
  "    <textarea rows='1' md-select-on-focus></textarea>" +
  "  </md-input-container>" +
  "</md-dialog-content>" +
  "</md-dialog>"
)
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Decline the Trip')
.cancel('Cancel');

Answer 1

I was able to fix this issue by, instead of saving the prompt in a variable, calling .show() and directly passing the information. Also, the htmlContent: key needed to be changed to template:. The fixed code:

  $mdDialog.show({
      controller: AppCtrl,
      template: "<md-dialog aria-label='List dialog'>" +
          "<md-dialog-content layout-padding>" +
          "<h2>Reason for Declining Trip</h2>" +
          "  <md-select ng-model='model' placeholder='Select a reason'>" +
          "    <md-option>Scheduling Conflict</md-option>" +
          "    <md-option>Personal Conflict</md-option>" +
          "    <md-option>Hours of Service Concern</md-option>" +
          "  </md-select>" +
          "<br>" +
          "  <md-input-container class='md-block'>" +
          "    <label>Other</label>" +
          "    <textarea rows='2' md-select-on-focus></textarea>" +
          "  </md-input-container>" +
          "</md-dialog-content>" +
          "</md-dialog>",
      parent: angular.element(document.body),
      ariaLabel: 'Lucky day',
      targetEvent: ev,
      ok: 'Decline the Trip',
      cancel: 'Cancel'
  }).then(function() {
      $scope.status = 'You decided to decline this trip.';
      submit();
  }, function() {

  });