AngularJS: minifications breaks my directive

Question

I use a directive to ask user for action confirmations in modals.
It works like a charm during development, but, after minification, it's broken.
This is the dreadful "$injector: unpr" error I get:

Error: [$injector:unpr] Unknown provider: aProvider <- a
...

I presume the problem is that $scope and $modalInstance are renamed, and should not be, but I don't know how to avoid this...

This is the directive code:

'use strict';
app.directive('reallyClick', ['$modal', function($modal) {
  var modalInstanceCtrl = function ($scope, $modalInstance) {
    $scope.ok = function () {
      $modalInstance.close();
    };

    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
  };

  return {
    restrict: 'A',
    scope: {
      reallyClick: '&',
      item: '='
    },
    link: function (scope, element, attrs) {
      element.bind( 'click', function() {
        var message = attrs.reallyMessage || 'Are you sure?';
        var modalHtml = '<div class="modal-body">' + message + '</div>';
        modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';

        var modalInstance = $modal.open({
          template: modalHtml,
          controller: modalInstanceCtrl
        });

        modalInstance.result.then(function () {
          scope.reallyClick({item:scope.item}); // raise an error : $digest already in progress
        }, function() {
          // modal dismissed
        });
      });
    }
  };
}]);

I use it this way:

...
<td title="Delete customer">
  <button
    class="btn btn-primary glyphicon glyphicon-trash"
    really-message="Are you really sure to remove customer <i>{{customer.name}}</i> ?" really-click="deleteCustomer(customerId)"
  ></button>
</td>
...

If it can be of any help, these are the modules I use during the build phase:

'auto_install',
'clean:dist',
'favicons',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'filerev',
'usemin',
'htmlmin',

and these are the modules I inject in my app:

var app = angular.module('smallBusinessApp', [
  'ngSanitize',
  'ngRoute',
  'firebase',
  'ui.bootstrap',
]);

Answer 1

The modalInstance Controller needs to be created with the dependency injection syntax as well,

'use strict';
app.directive('reallyClick', ['$modal', function($modal) {    
  return {
    restrict: 'A',
    scope: {
      reallyClick: '&',
      item: '='
    },
    link: function (scope, element, attrs) {
      element.bind( 'click', function() {
        var message = attrs.reallyMessage || 'Are you sure?';
        var modalHtml = '<div class="modal-body">' + message + '</div>';
        modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';

        var modalInstance = $modal.open({
          template: modalHtml,
          controller: modalInstanceCtrl
        });

        modalInstance.result.then(function () {
          scope.reallyClick({item:scope.item}); // raise an error : $digest already in progress
        }, function() {
          // modal dismissed
        });
      });
    }
  };
}]);

ModelInstanceController:

app.controller('modalInstanceCtrl',['$scope','$modalInstance',function ($scope, $modalInstance) {
    $scope.ok = function () {
      $modalInstance.close();
    };

    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
  }]);

Was a problem for me too and had to separate the controller part of the modal and do it like this, hope it helps!!