title: AngularJS 1.x custom filter can't be injected, unknown provider
body: <p>I'm trying to create a custom filter, but when I try to inject it into my controller, I get an 'Unknown provider' error. I have checked and double checked all the references, but I can't see what's wrong.</p>
  
  <p>I know that the file is referenced in my index.html correctly, it is loaded and can be found by the inspector. This is the code I have:</p>
  
  <p>In my app.js:</p>
  
  <pre><code>angular.module('equiclass', ['equiclass.controllers',
                           'equiclass.services',
                           'ngRoute'])
  .config(function ($routeProvider) {
  $routeProvider
    .when('/courses', {
      templateUrl: 'views/courses.html',
      controller: 'CourseCtrl'
    // And some other stuff with routes
  });
  
  angular.module('equiclass.controllers', ['equiclass.services', 'equiclass.filters']);
  angular.module('equiclass.services', []);
  angular.module('equiclass.filters', []);
  </code></pre>
  
  <p>My filter:</p>
  
  <pre><code>angular.module('equiclass.filters')
    .filter('testFilter', function() {
      return function(input) {
        return undefined;
      };
  });
  </code></pre>
  
  <p>And the controller:</p>
  
  <pre><code>angular.module('equiclass.controllers')
    .controller('CourseCtrl', function ($scope, testFilter) {
  
    });
  </code></pre>
  
  <p>Of course this is quite simplified, but it just doesn't work, and I can't see why. I have made several services and they all work and play along nicely.</p>