Angular material $mdDialog
<p>I have problem with angular material $mdDialog - that means content of dialog are displaying correctly, dialog comming out and all behaviours are correct for example clickOutsideToClose:true,  but I have error in my console which saying "TypeError: Cannot read property 'element' of undefined". And thats the reason my rest code $scopes doesn't work , I have to fixed this bug but where can be the issue?! Many thanks in advance</p>

<p><strong>template.html</strong> is</p>

<pre><code>&lt;md-dialog ng-cloak&gt;
    &lt;md-toolbar&gt;
        &lt;div class="md-toolbar-tools"&gt;
            &lt;h2&gt;You are editing {{ oldValue }} material&lt;/h2&gt;
            &lt;span flex&gt;&lt;/span&gt;
            &lt;md-button class="md-icon-button" ng-click="cancel()"&gt;
                &lt;md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"&gt;&lt;/md-icon&gt;
            &lt;/md-button&gt;
        &lt;/div&gt;
    &lt;/md-toolbar&gt;
    &lt;md-dialog-content&gt;
        &lt;div class="md-dialog-content"&gt;
            &lt;form name="addMaterial"&gt;
                &lt;div class="row clearfix"&gt;
                    &lt;div class="col-md-8"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;label&gt;Material&lt;/label&gt;
                            &lt;md-select name="material" ng-model="edit.material_library_id" ng-disabled="booleanVal"&gt;
                                &lt;md-optgroup label="material"&gt;
                                    &lt;md-option  ng-value="materialsEdits.id" ng-repeat="materialsEdits in materialsEdit track by $index"&gt;{{materialsEdits.name}}&lt;/md-option&gt;
                                &lt;/md-optgroup&gt;
                            &lt;/md-select&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row clearfix"&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;label&gt;price starting&lt;/label&gt;
                            &lt;input name="price_starting" ng-model="edit.price_starting" type="number" step="1"&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;label&gt;price per&lt;/label&gt;
                            &lt;input name="price_per" ng-model="edit.price_per" type="number" step="1"&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;md-checkbox  aria-label="Disabled checkbox" ng-model="showMorePrices"&gt;
                            Show additional prices
                        &lt;/md-checkbox&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row clearfix" ng-show="showMorePrices"&gt;
                    &lt;div class="col-md-3"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;label&gt;price surface area&lt;/label&gt;
                            &lt;input name="price_surface_area" ng-model="edit.price_surface_area" type="number" step="1"&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-3"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;label&gt;price object volume&lt;/label&gt;
                            &lt;input name="price_object_volume" ng-model="edit.price_object_volume" type="number" step="1"&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-3"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;label&gt;price first print&lt;/label&gt;
                            &lt;input name="price_first_print" ng-model="edit.price_first_print" type="number" step="1"&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-3"&gt;
                        &lt;md-input-container class="md-block"&gt;
                            &lt;label&gt;price subsequent prints&lt;/label&gt;
                            &lt;input name="price_subsequent_prints" ng-model="edit.price_subsequent_prints" type="number" step="1"&gt;
                        &lt;/md-input-container&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row clearfix"&gt;
                    &lt;div class="col-md-8"&gt;
                        &lt;div layout="row" layout-wrap flex ng-show="edit.material_library_id"&gt;
                            &lt;div flex="50" ng-repeat="item in materialsEdit| filter:edit.material "&gt;
                                &lt;div ng-repeat="test in item.color"&gt;
                                    &lt;div ng-repeat="(key,value) in test"&gt;
                                        &lt;div flex-xs flex="50"&gt;
                                            &lt;md-checkbox  ng-model="edit.color[key]" ng-click="booleanVal = !booleanVal" &gt;
                                                {{ value}} {{ booleanVal}}
                                            &lt;/md-checkbox&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/md-dialog-content&gt;
    &lt;md-dialog-actions layout="row"&gt;
        &lt;span flex&gt;&lt;/span&gt;
        &lt;md-button class="md-default md-raised" ng-click="hide()"&gt;
            cancel
        &lt;/md-button&gt;
        &lt;md-button class="md-primary md-raised" ng-click="sendEdit()"&gt;
          submit
        &lt;/md-button&gt;
    &lt;/md-dialog-actions&gt;
&lt;/md-dialog&gt;
</code></pre>

<p>Controller:</p>

<pre><code>$scope.editItem = function(ev ,id) {
   $mdDialog.show({
                templateUrl:  _BASEURL + '/js/angularApp/htmlTemplate/test.html',
                parent: angular.element(document.body),
                clickOutsideToClose:true,
                targetEvent: ev,
                controller: 'materialEditCtrl',
                fullscreen: useFullScreen
            });
         };
</code></pre>

<p><strong>html</strong>:</p>

<pre><code>  &lt;md-button ng-value="{{item.id}}" ng-click="editItem($event,item.id)" class="md-secondary md-raised md-accent"&gt;edit&lt;/md-button&gt;
</code></pre>

<p>Its not matter of define controller - </p>