Wie kann das md-select im AngularJS ui bootstrap $ modal verwendet werden?

Question

Ich möchte ein Angular-Material md-select in einem eckigen ui bootstrap $ modal haben.

Ich bin mit dem folgenden Code versucht

MyController1.js

$modal.open({ 
     templateUrl: My.html, 
     controller: MyController2, 
     backdrop: true, 
     windowClass: 'modal' 
    }); 

My.html

<div layout="row"> 
    <md-input-container> 
    <label>Items</label> 
    <md-select ng-model="selectedItem" md-selected-text="getSelectedText()"> 
     <md-optgroup label="items"> 
     <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option> 
     </md-optgroup> 
    </md-select> 
    </md-input-container> 
</div> 

MyController2.js

$scope.items = [1, 2, 3, 4, 5, 6, 7]; 
$scope.selectedItem; 
$scope.getSelectedText = function() { 
    if($scope.selectedItem !== undefined) { 
     return "Selected: " + $scope.selectedItem; 
    } else { 
     return "Please select an item"; 
    } 
}; 

Ich kann das MD-Select-Widget im modalen Popup anzeigen. Aber wenn ich versuche, den Wert aus dem "Dropdown" auszuwählen, ist die Liste hinten im $ modal geöffnet.

Meine Edited Frage: Hinzufügen paar Dinge zu bekommen genaue Antwort

Ich kann das gleiche erreichen md-dialog verwenden. Aber mein Code wie diese

MyController2.js

angular.module('myModule', [ 
]) 
.controller('MyController2', ['$mdDialog', '$scope', 
function($mdDialog, $scope) { 
    $scope.items = [1, 2, 3, 4, 5, 6, 7]; 
    $scope.selectedItem; 
    $scope.getSelectedText = function() { 
    if($scope.selectedItem !== undefined) { 
     return "Selected: " + $scope.selectedItem; 
    } else { 
     return "Please select an item"; 
    } 
    }; 
    }); 

Also, wenn ich Code haben wie die unten in MyController1.js

$mdDialog.show({ 
    controller: MyController2, 
    templateUrl: 'My.html', 
    parent: angular.element(document.body), 
    // targetEvent: ev, 
    clickOutsideToClose:true 
}) 
    .then(function(answer) { 
     $scope.status = 'You said the information was "' + answer + '".'; 
    }, function() { 
     $scope.status = 'You cancelled the dialog.'; 
    }); 

Es gibt Fehler mich Error: MyController2 is not defined

Answer 1

versuchen Sie dies:

.md-select-Menü-Container {z-index: 9999;}