AngularJS - BottomSheet not working. "is not a function"

Question

Im having some difficulties with openBottomSheet API.

This is my HTML:

<md-button aria-label="Open Settings" ng-click="openBottomSheet($event)">
   <ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>

This opens the openBottomSheet inside my controller that looks like this:

$scope.openBottomSheet = function() {
    $mdBottomSheet.show({
        template: '<md-bottom-sheet>' +
        'Hello! <md-button ng-click="closeBottomSheet()">Close</md-button>' +
        '</md-bottom-sheet>'
    })
    // Fires when the hide() method is used
        .then(function() {
            console.log('You clicked the button to close the bottom sheet!');
        })
        // Fires when the cancel() method is used
        .catch(function() {
            console.log('You hit escape or clicked the backdrop to close.');
        });
};
$scope.closeBottomSheet = function($scope, $mdBottomSheet) {
    $mdBottomSheet.hide();
}

This is based on the documentation, so why cannot i get it to work in my project?

Controller injection:

.controller('containerCtrl', ['$scope', '$rootScope', '$stateParams', '$http', '_', '$q', '$state', '$mdBottomSheet','$mdSidenav', function ($scope, $rootScope, $stateParams, $http, $q, $state,$mdBottomSheet,$mdSidenav) {

This is my error:

main.min.js:3 TypeError: c.show is not a function

 `c.show` is this line in controller: `$mdBottomSheet.show({` (minified version)

Answer 1

Remove the - in the controller injection. Both string array injection and service injection should be equal and same order.

.controller('containerCtrl', ['$scope', '$rootScope', '$stateParams', '$http',  '$q', '$state', '$mdBottomSheet','$mdSidenav', 
function ($scope, $rootScope, $stateParams, $http, $q, $state,$mdBottomSheet,$mdSidenav) {