Angular: problemas para inyectar una fábrica en un controlador: angularjs, inyección de dependencia, controlador, fábrica

Estoy tratando de separar mi código angular en fábricas, para que mis controladores no se vuelvan imposibles de mantener. Específicamente, en mi fábrica, alojaré el código que se compartirá entre múltiples controladores.

El problema es que parece que no puedo inyectar una fábrica en mi controlador sin importar lo que haga.

Aquí está mi fábrica

angular.module("my-app")
.factory("Game", function() {
var colors = ["#FF0000", "#660000", "#FF3300", "#FF9900", "#003300",
"#000033", "#660033", "#FF0033", "#383838"];
});

Aquí está mi controlador

angular.module("my-app")
.controller("gamesController", ["$scope", "$interval", "Game",
function($scope, $interval, Game) {

Y aquí está mi orden de carga

<script src="scripts/app.js"></script>
<script src="scripts/services/game.js"></script>
<script src="scripts/controllers/navController.js"></script>
<script src="scripts/controllers/gamesController.js"></script>

yo obtengo undefined provider y no puedo entender dónde está el problema.

Respuestas

Angular Factory debe tener un resultado de retorno.

Sintaxis: module.factory ("factoryName", función);

Resultado: al declarar factoryName como argumento inyectable, se le proporcionará el valor que se devuelve invocando la referencia de función pasada a module.factory.

su fábrica debería ser así:

angular.module("my-app")
.factory("Game", function() {
return { colors : ["#FF0000", "#660000", "#FF3300", "#FF9900", "#003300",
"#000033", "#660033", "#FF0033", "#383838"]
}
});

si desea conocer más detalles, visite AngularJS: Servicio vs proveedor vs fábrica