Dependency injection issue when minify the js (Mini-challenge 4)

Mini-challenge 4

ng-challengeAngularJs Mini-Challenges is a growing collection of “Challenges” about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:


Book Tip

ng-book – The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?



The Challenge:

We have the following Angular app and we need to minify the code, in the controller of the application we are injecting two services $scope and $timeout (see controller below), we are having errors with the injection when we minify the code:

The view:

<div><button id="btn" type="button">Click me</button>


The controller:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope, $timeout) {

document.getElementById('btn').onclick = function (e) {
$timeout(function () {
$ = "Button clicked";

This application works without any issue (see code on jsfiddle).

The js code needs to be minified, after the minification, we started receiving errors in the browser console, see jsfiddle with minified js code:

What you should change in the js code in order to avoid errors when minifying Angular code

You can use this online tool to minify js code:


Here you can find a possible solution

If you feel that the solution is poor or incomplete or there is room for improvement, please share with every one, you can leave a comment.