Angular material $mdToast show custom html from directive link

Question

I am trying to create a angular directive to display notification alert similar to bootstrap alert. The angular toaster is shown if i use the built in $mdToast.simple but it doesn't work with my custom template.

Please find below my directive and template html.

(function () {
    "use strict";

    angular
        .module("mymodule")
        .directive("toastMessage", ["$mdToast", function ($mdToast) {
            /// <summary>Markup for the message banner</summary>
            return {
                restrict: "E",
                scope: {
                    messageState: "="
                },
                templateUrl: "toastMessage.html",
                controller: ["$scope", "$mdToast", function ($scope, $mdToast) {
                    $scope.closeToast = function () {
                        $mdToast
                            .hide()
                            .then(function () {
                                $scope.messageState = undefined;
                            })
                    }

                    $scope.shouldShowToast = function () {
                        var show = false;
                        if ($scope.messageState) {
                            if ($scope.messageState.getSuccessMessage() !== "") show = true;
                            if ($scope.messageState.getErrorMessage() !== "") show = true;
                            if ($scope.messageState.getNoRecordsMessage() !== "") show = true;
                        }
                        return show;
                    }
                }],
                link: function ($scope, element, attr) {
                    // Watch for changes to messageState variable
                    $scope.$watch('messageState', function (oldVal,newVal) {
                        if ($scope.shouldShowToast()) {
                            //element.show();
                            //$mdToast.show(                                    //This works
                            //    $mdToast.simple()
                            //        .content('this is content')
                            //        .position('top right')
                            //        .hideDelay(3000));

                            $mdToast.show({
                                hideDelay: 0,
                                position: 'top right',
                                *controller: this,                           
                                templateUrl: '/Scripts/common/core/toastMessage.html'*
                            });
                        } else {
                            element.hide();
                        }
                    }, true);
                }
            };
        }]);
}());


//toastMessage.html


// No Records toast
<md-toast ng-if="messageState.getNoRecordsMessage()">
  <span class="md-toast-text" flex>{{messageState.getNoRecordsMessage()}</span>
  <md-button ng-click="closeToast()">
    Close
  </md-button>
</md-toast>

// Error Message toast
<md-toast ng-if="messageState.getErrorMessage().">
  <span class="md-toast-text" flex>
    {{messageState.getErrorMessage()}}} <br>
    Please contact your system administrator if the error persists.
  </span>
  <md-button ng-click="closeToast()">
    Close
  </md-button>
</md-toast>

// Success Message toast
<md-toast ng-if="messageState.getSuccessMessage()">
  <span class="md-toast-text" flex>{{messageState.getSuccessMessage()}}</span>
  <md-button ng-click="closeToast()">
    Close
  </md-button>
</md-toast>

Can anyone help how to show the custom template in $mdToast.show inside the directive link?

Thanks