Does protractor work with Angular material dialog popups?

I am trying to target elements in a popup dialog in protractor however I get the following error once the popup dialog shows up:
Failed: unknown error: Element is not clickable at point (1204, 32). Other element would receive the click: <div class="md-dialog-container ng-scope" style="top: 0px; height: 728px;">...</div>
I am new to angular and protractor and I have searched to see if there are similar issues. The javascript:

it('should create a case and wait for the case page to load',  function(){
        casePage.goToCasesPage();
        var createCaseBtn = element(by.id("create-case-btn"));
        createCaseBtn.click();
        var stdCaseTypeBtn = element(by.css('[ng-click="vm.createCase($event, \'standard\')"]') );
        expect(stdCaseTypeBtn);
        stdCaseTypeBtn.click().then(function(){
            var oeUtils = require('../common/utils');

            //Fill the crud form and click create
            var caseTitle = element(by.model('case.title'));
            var caseDescription = element(by.model('case.description'));
            var okDialogBtn = element(by.id('create-case-dlg-btn'));

            var caseTxtTitle = oeUtils.generateRandomString(8);
            caseTitle.sendKeys(caseTxtTitle);
            caseDescription.sendKeys(oeUtils.generateRandomString(20));
            okDialogBtn.click();

            expect(element(by.binding('case["cm:title"]'))).getText().toEqual(caseTxtTitle);
        });

The html template (the actual popup):

<md-dialog aria-label="Case edit dialog">
  <form name="form">
    <md-toolbar layout="row">
      <div class="md-toolbar-tools">
        <h2 ng-hide="editCase">{{ 'CASE.CREATE_CASE' | translate }}</h2>
        <h2 ng-show="editCase">{{ 'CASE.EDIT_PROPERTIES' | translate }}</h2>
      </div>
    </md-toolbar>
    <md-dialog-content style="max-width:800px;max-height:810px;min-width:20em;">

      <md-input-container>
        <label><span class="md-warn">*</span> {{ 'CASE.TITLE' | translate }}</label>
        <input type="text" ng-model="case.title" required focus-me>
      </md-input-container>

      <md-input-container>
        <label>{{ 'CASE.DESCRIPTION' | translate }}</label>
        <textarea ng-model="case.description"></textarea>
      </md-input-container>

    </md-dialog-content>
    <div class="md-actions" layout="row">
      <md-button id="create-case-dlg-btn" type="submit" class="md-primary" ng-click="vm.update(case)" ng-disabled="form.$invalid">
        {{ 'COMMON.OK' | translate }}
      </md-button>
      <md-button type="button" ng-click="vm.cancel(form)">
        {{ 'COMMON.CANCEL' | translate }}
      </md-button>
    </div>
  </form>
</md-dialog>