ngClick on mdDialog's action button not triggering controller function

Question

I am trying to undertsand angular dialogs. I have created a very simple code to display a custom alert dialog. I am trying to pass a string message to the dialog. Dialog has an OK button which shoudl close it.

The message data is being passed correctly. However for some reason, the OK button is not triggering the dialog controller's function.

Here is my code

Alert.html - Contains template for Alert dialog

<md-dialog>
    <md-dialog-content>
        {{message}}
    </md-dialog-content>

    <md-dialog-actions>
        <md-button ng-click="alertFunc">
            OK
        </md-button>
    </md-dialog-actions>
</md-dialog>

AlertCtrl.js - Contains Controller for Alert Dialog

app.controller('AlertCtrl', function ($scope, $mdDialog, message) {
    $scope.message = message

    $scope.alertFunc = function () {
        console.log("Closing Alert Dialog")
        $mdDialog.hide()
    }
})

DialogService.js - Contains API to launch alert dialog

app.service('DialogService', function($mdDialog) {

    // Launch Alert Dialog
    this.alert = function (message) {

        // Show Dialog
        $mdDialog.show({    templateUrl: 'Alert.html',
                            controller: 'AlertCtrl',
                            clickOutsideToClose: true,
                            locals: { message: message }
        })
    }
})

The log inside alertFunc never shows up.

I also tried putting controllerAs : 'ctrl' inside the $mdDialog.show. Then I changed the alertFunc declaration to this.alertFunc = function... and changed ng-click='ctrl.alertFunc'. However this did not work as well.

Can someone help me figure out the problem.

Thank You

Answer 1

It should be ng-click="alertFunc()" instead of ng-click="alertFunc". 2 hours of effort and a stupid parenthesis.

Amazing how ignorant a programmer can get.