AngularJS Material - Dialog Close Using Phone "back" Button

Overflow!

I am building an Angular Material site for the first time and I seem to be having an issue with the Dialog box feature. I can get the box to display and close fine except on a mobile device. Namely, when the user presses the "Clear" or "Back Button" on the phone. When you do this (or click the back button on the browser) it has no affect on the dialog box. It remains in view and waiting for input. Pressing the ESC key closes it. Anybody on a phone would instinctively think they can clear out of it and in my opinion they should be. I have tried all sorts of various methods that either do not work I am just not implementing them properly. So, here goes..

Controller:

'use strict'; 
app.controller('NavCtrl', function ($scope, $mdDialog) {    
$scope.itworked = "Angular Successful";
var dialogContent = ' \
    <md-content> \
      <div class="diagtest">Content</div> \
        <p class="awesome"><a href="#/" ng-click="hide()">This link works</a></p> \
        <p><a href="#/portfolio" ng-click="hide()">This link also works</a></p> \
        <p>filler</p> \
    </md-content> \
';
var noForm = '<md-dialog id="navDialog">' + dialogContent + '</md-dialog>';
var formAround = '<form ng-submit="hide()"><md-dialog>' + dialogContent + '</md-dialog></form>';
var formInside = '<md-dialog><form ng-submit="hide()">' + dialogContent + '</form></md-dialog>';

function makeDialog(tmpl) {
    return function(ev) {
        $mdDialog.show({
            template: tmpl,
            targetEvent: ev,
            controller: 'DialogController'
        });
    };
}
$scope.dialogNoForm = makeDialog(noForm);
$scope.dialogFormAround = makeDialog(formAround); \\ This is for future use
$scope.dialogFormInside = makeDialog(formInside); \\ so is this...
});
app.controller('DialogController', function($scope, $mdDialog) {
$scope.hide = function() {
    $mdDialog.hide($scope.participant);
};
$scope.cancel = function() {
    $mdDialog.cancel();
};
});

Anything anybody can suggest I am willing to try.

I have tried the following:

setCancellable(true)

Also tried using a "navigation" trick to close the dialog box if the back button was pressed but it just doesnt work.

You can see an example that has the SAME functionality on the official docs site. If you check the Dialogs you can see their functionality is the exact same.

http://ift.tt/1AmiwVc

They are kind of written a little differently but they act the same on a desktop and a phone as mine does.

Thanks in advance to anybody who can shed light! I appreciate it!