javascript - Angular Material - Pre-rendered dialog doesn't appear but the background color changes -

i'm trying create pre-rendered modal using angular-material. when click button should fire modal, screen becomes dark gray (the modal background) if modal there actual modal doesn't appear. have copied straight angular material's demo not sure why isn't working.

html

<md-button class="md-raised md-primary"ng-click="vm.showmodal($event)">      add review </md-button> <md-dialog layout-padding aria-label="mydialog" id="mydialog" class="dialog">     <md-dialog-content>         <h2>pre-rendered dialog</h2>         <p>             pre-rendered dialog, means <code>$mddialog</code> doesn't compile             template on each opening.             <br/><br/>             dialog element static element in dom, visually hidden.<br/>             once dialog opens, fetch element dom our dialog , upon close             restore element old dom position.         </p>     </md-dialog-content> </md-dialog> 

css

.dialog {     visibility: hidden; } 

controller

function showmodal(ev) {       $mddialog.show({         contentelement: '#mydialog',         parent: angular.element(document.body),         targetevent: ev,         clickoutsidetoclose: true       }); }