title: AngularJS Service Undefined: Unknown provider: $scopeProvider <- $scope
body: <p>I've started learning Angular JS and I'm having a problem with injecting a service into a controller. I'm trying to put the <code>ThreadFactory</code> service into <code>ThreadController</code>, but I'm getting an undefined error when calling it. Any advice would be great. The error I'm getting is:</p>
  
  <p>Unknown provider: $scopeProvider &lt;- $scope &lt;- ThreadService</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('threadsApp', ['ngRoute']);
  angular.module('threadsApp')
      .config(function ($routeProvider, $locationProvider) {
          $routeProvider
              .when('/', {
                  templateUrl: 'views/index.html',
              })
              .when('/selected/:topicName', {
                  templateUrl: 'views/threads.html',
                  controller: 'ThreadController',
              })
              .otherwise({
                  redirectTo: "/"
              });
              $locationProvider.html5Mode(true);
      });
  </code></pre>
  
  <p><strong>ThreadController.js</strong></p>
  
  <pre><code>angular.module('threadsApp').controller("ThreadController",
      ["$scope", "$route", "$routeParams", "ThreadService", function ($scope, $route, $routeParams, ThreadService) {
      $scope.test = "Hello!";
      $scope.test2 = ThreadService.get();
  }]);
  </code></pre>
  
  <p><strong>ThreadService.js</strong></p>
  
  <pre><code>angular.module('threadsApp').service("ThreadService", ["$scope", function ($scope) {
      return {
          get: function() {
              return "Hello";
          }
      }
  }]);
  </code></pre>
  
  <p><strong>Order of Imports</strong></p>
  
  <pre><code>    &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/bootstrap/dist/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="components/app.js"&gt;&lt;/script&gt;
      &lt;script src="components/bodyController.js"&gt;&lt;/script&gt;
      &lt;script src="components/TopicController.js"&gt;&lt;/script&gt;
      &lt;script src="components/ThreadService.js"&gt;&lt;/script&gt;
      &lt;script src="components/ThreadController.js"&gt;&lt;/script&gt;
  </code></pre>