Angular Material FAB doesn't close in an mdDialog - angularjs

Question

I have an issue with FAB that seems to initialize open and I can't close it. The menu items also seem to be consuiming space on the line rather than floating over it.
Not sure what I did 'wrong'.
http://codepen.io/ed4becky/pen/eJwYvw
<md-dialog aria-label="Testing FAB in Dialog">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Testing FAB in Dialog</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; ">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding" style="width:600px;">
<md-fab-speed-dial md-direction="left" ng-class="md-fling" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
X
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
No
</md-button>
<md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
Yes
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</md-content>
</md-tab>
</md-tabs>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button ng-click="cancel()" style="margin-right:20px;">
Done
</md-button>
</md-dialog-actions>
</md-dialog>

Answer 1

Here you have a working plunker
Just a few things to keep in mind:
As you post in a comment, update to an up to date angular-material version. Plunker is using the latest 1.1.1 relase
ng-class accepts an expression as parameter, so you should change ng-class="md-fling" per ng-class="'md-fling'" if you don't bind the value to a controller variable.
When you call the $mdDialog.show(...) service, you are setting parent: angular.element(document.body). Not sure if you really need this for your use case, but if you remove it, it works well.
Code, just for reference:
View:
...
<md-fab-speed-dial md-direction="left" ng-class="'md-fling'" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
X
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
No
</md-button>
<md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
Yes
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
...
Controller:
...
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'tabDialog.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
});
};
...
Hope it helps