javascript - Issues with Angular Material Dialog Boxes

I have the following code to generate a dialog but it doesn't show up. When i click on a button to show the dialog, i only see a dark layer on the page but no dialog. when i click on the dark layer, it disappears.

// i declare my angular module and its dependencies on ngMaterial here

// i decalare a controller here and it depends on "$mdDialog, $mdMedia"

$scope.showAbortSessionForm = function(event){
var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && $scope.customFullscreen;
$mdDialog.show({
controller: DialogController,
templateUrl: 'app/views/stop.html',
//template: '<div>testing</div>',
parent: angular.element(document.body),
targetEvent: event,
clickOutsideToClose: true,
fullscreen: useFullScreen
}).then(function(){
$scope.status = "ddddd";
}, function(){
$scope.status = "tttttt";
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}

// Stop.html

<md-dialog>
<md-content>
<div>
<form>
<div><label>Name:</label></div>
<input type="text" placeholder="name" />
<div><label>B:</label></div>
<textarea type="text" placeholder="blog"></textarea>
<div>
<input type="submit" value="Send">
<input type="reset" value="Reset">
<button>Cancel</button>
</div>
</form>
</div>
</md-content>
</md-dialog>

index.html // this is where i click on a button to show a dialog.

Abort

Can someone direct me to the right path.

Thanks for your help.