Angular error $mdDialog.show is not a function

Question

I am trying to open a modal on click of a button with Angular. On the function called on btn click I am having the code mentioned below:

        function openAddVideoModal() {
        var modalInstance = $mdDialog.show({
                templateUrl: 'createDesign.html',
                controller: 'createDesignCtrl',
                resolve: {
                    currentUser: function () {
                        return _this.currentUser;
                    },
                    postOptions: function() {
                        return {"receiverId":0};
                    }
                },
                parent: angular.element(document.body),
                clickOutsideToClose:true,
                fullscreen: false
            });
    }

Though, when i click on the button, i receive this error message:

TypeError: $mdDialog.show is not a function

Can anyone please help? Thank you in advance.

Answer 1

You had injected dependency in your controller factory function in wrong order

Change

.controller('Ctrl', [
   '$rootScope', '$scope', '$state', '$mdDialog', '$window', 'CONFIG_CONSTANTS', 'LanguageService', 
     function($rootScope, $scope, $window, $state, $mdDialog, CONFIG_CONSTANTS, LanguageService) { 

To(moved $window from 3rd place to 5th place)

.controller('Ctrl', [
  '$rootScope', '$scope', '$state', '$mdDialog', '$window', 'CONFIG_CONSTANTS', 'LanguageService', 
    function($rootScope, $scope, $state, $mdDialog, $window, CONFIG_CONSTANTS, LanguageService) {

Always make sure the dependency have to be used in the similar sequence, the way you have injected them in inline array of dependency.

Answer 2

Your inject annotations are not ordered correctly:

.controller('Ctrl', ['$rootScope', '$scope', '$state', '$mdDialog', 
'$window', 'CONFIG_CONSTANTS', 'LanguageService', function($rootScope, 
$scope, $state, $mdDialog, $window, CONFIG_CONSTANTS, LanguageService);