无法在angularjs对话框上应用CSS

Question

I am creating a mobile application, where when you click on a button and a dialog window pops up. My problem is that this window is not responsive, and I cannot change its CSS.

Here's the code:

Controller.js

.controller('jargonController', ['$scope','$mdDialog','$mdMedia',function ($scope, $mdDialog, $mdMedia){

 $scope.status = '  ';

  $scope.showTabwtr = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'templates/jargon/wtr.tmpl.html',
      parent: angular.element(document.body),
      windowClass: 'center-modal',
      targetEvent: ev,
      clickOutsideToClose:true
    })
        .then(function(answer) {
          $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
          $scope.status = 'You cancelled the dialog.';
        });
  }

Index.html

<div class="col col-50" >
    <img  src="img/jargon/Image13.png" ng-click="showTabwtr($event)" style="width: 100%; height: auto"/>
</div>

Template

<div class="modall">
    <img  style="max-width:200px; max-height:100px"src="img/description/Image17.png"/>
</div>

CSS

.modall {

  margin: auto;
  position: relative;
  max-width: 200px;
  max-height: 80px;
  background: transparent;
}

Answer 1

$scope.showTabwtr = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'templates/jargon/wtr.tmpl.html',
      parent: angular.element(document.body),
      windowClass: 'center-modal',
      targetEvent: ev,
      cssClass: 'your css name',
      clickOutsideToClose:true
    })

use this cssClass property