Where is my Angularjs minify error? Error $injector

Question

I'm running into that annoying Angular minify problem (I really hope this issue is non-existent in Angular 2)

I've commented out all my app module injections and going down the list 1 by 1 to find out where the problem is and I think I narrowed it down to my searchPopoverDirectives:

Can you see what I'm doing wrong?

Original code, produces this error Unknown provider: eProvider <- e:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', function() {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    })

})();

I then tried the [] syntax in an attempt to fix the minify problem and ran into this error Unknown provider: $scopeProvider <- $scope <- searchPopoverDirective:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', ['$scope', function($scope) {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    }])

})();

---

UPDATE: Also found out this guy is causing a problem:

.directive('focusMe', function($timeout, $parse) {
    return {
        link: function(scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function(value) {
                if (value === true) { 
                    $timeout(function() {
                        element[0].focus(); 
                    });
                }
            });
            element.bind('blur', function() {
                scope.$apply(model.assign(scope, false));
            })
        }
    }
})

Answer 1

When you minify code, it minify all code, so your

controller  : function($scope) {

was minified to something like

controller  : function(e) {

so, just use

controller  : ["$scope", function($scope) { ... }]

Answer 2

When minifying javascript the parameter names are changed but strings remain the same. You have 2 ways that you can define which services need to be injected:

1. Inline Annotation:

   phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http){
       ...
   }]);
   

2. Using the $inject property:

   phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);
   
   PhoneListCtrl.$inject = ['$scope', '$http'];
   
   function PhoneListCtrl($scope, $http){
       ...
   }
   

Using $inject is considered more readable than inline annotations. It is best practice to always have one line declaring the controller, service, or directive, one line for defining the injection values, and finally the implementation method. The method may be defined last due to the hoisting nature of javascript.

Remember: The order of your annotation (strings) and your function parameters must be the same!