How do I show a dropdown/dropdown list/select list inside of a angular material's dialog's content?

Question

I am pretty new to AngularJS and I am using Angular Material and Dialog precisely the Custom Dialog to show a popup dialog.

Now I am able to show the Dialog, but the problem is that I am not able to show a dropdown inside of the dialog's <md-dialog-content> tag.

I show the dialog when I click a button. The minimized code which I copied from the links I added above:

$scope.onClicked = function(ev) {
        $mdDialog.show({
            controller: DialogController,
            templateUrl: 'app/html/printDialog.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: $scope.customFullscreen
        })
            .then(function(answer) {
                $scope.status = 'You said the info was "' + answer + '".';
            }, function() {
                $scope.status = 'You cancelled the dialog.';
            });
    }

Now the printDialog.html (which is also copied and file name changed to full my needs):

<md-dialog aria-label="Print Report">
    <form ng-cloak>
        <md-toolbar>
            <div class="md-toolbar-tools">
            The toolbar or headers
        </div>
    </md-toolbar>

    <md-dialog-content>
        <div class="md-dialog-content">
        All the contents goes here
        </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
        All the dialog actions goes here
    </md-dialog-actions>
</form>

Now, how do I show a drop down selectable list with a default selected item inside of this dialog.

Any help would me much appreciated.

Answer 1

Here's a very simple example - CodePen

Markup

<div ng-controller="MyController as vm" id="popupContainer" ng-cloak="" ng-app="app">
   <md-button class="md-primary md-raised" ng-click="vm.open($event)">
      Open
    </md-button>
  <script type="text/ng-template" id="printDialog.html">
    <md-dialog aria-label="Print Report">
        <form ng-cloak>
            <md-toolbar>
                <div class="md-toolbar-tools">
                The toolbar or headers
            </div>
        </md-toolbar>

        <md-dialog-content>
            <div class="md-dialog-content" layout="column">
            All the contents goes here
            <md-input-container>
              <label>Select Beatle</label>
              <md-select ng-model="chosenOption">
                <md-option ng-repeat="option in options" ng-value="option">
                {{option}}
                </md-option>
                </md-select>
            </md-input-container>

            </div>
        </md-dialog-content>

        <md-dialog-actions layout="row">
            All the dialog actions goes here
        </md-dialog-actions>
    </form>
    </md-dialog>
  </script>
</div>

JS

angular.module('app',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('MyController', function($scope, $mdDialog) {
  this.open = function(ev) {
    $mdDialog.show(
      {
        templateUrl: "printDialog.html",
        clickOutsideToClose: true,
        controller: DialogController,
    });
  };

  function DialogController($scope, $mdDialog) {
    $scope.options = ["john", "paul", "george", "ringo"];
    $scope.chosenOption = "ringo"; // default

    $scope.$watch("chosenOption", function (newValue) {
      if (angular.isDefined(newValue)) {
        console.log(newValue);
      }
    });

    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };
  }
})