title: AngularJS: Unknown provider: $scopeProvider <- $scope error (not injecting $scope in the service)
body: <p>I seem to have a similar problem to many others working with AngularJS and dependency injection, which is: my AngularJS app gives an Unknown provider: $scopeProvider &lt;- $scope error when I try to inject a service into a controller. Still, the only common mistake (and solution) I could find everywhere is that one should not inject $scope or $rootScope in the service function. Which I didn't do. The other issue that I found is that you should pass all dependencies as strings because they are not recognized by AngularJS due to minification (which I have in my dev ops now). Which I also did. So now the question is... what is wrong with my logic/structure and how can I solve this?</p>
  
  <p>Here's the basic structure of my app:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('MyApp', ['ngMaterial']);
  
  angular
         .module('MyApp')
         .factory('Utils', function(){
    return {
     normalCase: function(str){
     result = '';
     str.split(' ').forEach(function(string, i){
      result += string[0].toUpperCase() + string.slice(1).toLowerCase();
      if(i&lt;str.split(' ').length) result += ' ';
     });
     return result;
     }
    })
   .controller('AppController', ['$scope', '$mdDialog', 'Employee', 'Utils', '$http', 
     function($scope, Employee, Utils, $http, $mdDialog){
           $scope.employee.firstName = Utils.NormalCase(employee.firstName);
    }])</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, the order of the files added in the index.html file is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/models/Employee.js"&gt;&lt;/script&gt;
  &lt;script src="js/models/Utils.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/AppController.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/EmployeeListController.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/ScorecardController.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance!</p>