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

i pretty new angularjs , using angular material , dialog precisely custom dialog show popup dialog.

now able show dialog, problem not able show dropdown inside of dialog's <md-dialog-content> tag.

i show dialog when click button. minimized code copied links 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 info "' + answer + '".';             }, function() {                 $scope.status = 'you cancelled dialog.';             });     } 

now printdialog.html (which copied , file name changed full needs):

<md-dialog aria-label="print report">     <form ng-cloak>         <md-toolbar>             <div class="md-toolbar-tools">             toolbar or headers         </div>     </md-toolbar>      <md-dialog-content>         <div class="md-dialog-content">         contents goes here         </div>     </md-dialog-content>      <md-dialog-actions layout="row">         dialog actions goes here     </md-dialog-actions> </form> 

now, how show drop down selectable list default selected item inside of dialog.

any me appreciated.

here's simple example - codepen

markup

<div ng-controller="mycontroller 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">                 toolbar or headers             </div>         </md-toolbar>          <md-dialog-content>             <div class="md-dialog-content" layout="column">             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">             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();     };   } })