Having trouble getting a factory to be recognized in angular controller

Question

I'm trying to pass data from one controller to another using a factory and for some reason my factory isn't getting recognized in angular seed. Here is my app.js file which I'm declaring my factory

var myApp = angular.module('myApp', ['myApp.controllers','angularFileUpload', 'ngRoute']);
//
//
myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/' ,{templateUrl:"/syncproto/partials/videoSlides.html"}, "sync").
        when('/scenarios', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl").
        when('/scenarios/:id', {templateUrl:"/syncproto/partials/scenarios.html"}, "scenariosCtrl")
}]);

myApp.factory('Data', function() {
    var Data;
    return {
        getData: function () {
            return Data;
        },
        setData: function(value) {
            Data = value;
        }
    };
});

Here is the controller which I'm using the factory Data

.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data) {
        $scope.scenarios = [];
        $scope.thumbnails = [];
        $scope.init = function(){
            console.log('init hit');
            $http({ method: 'GET', url: 'http://localhost:3000/scenarios' }).
                success(function (data, status, headers, config) {
                    angular.forEach(data, function(scenario) {
                        if (scenario.video.length != 0 && scenario.video[0].thumbnailLocation != undefined){
                        $scope.thumbnails.push(scenario.video[0].thumbnailLocation);
                        //console.log('thumbnail is' + scenario.video.thumbnailLocation);
                            $scope.scenarios.push(scenario);
                            console.log(scenario.video[0].thumbnailLocation);
                        }
                    });
                    //console.log($scope.scenarios);
                    console.log('success');
                }).
                error(function (data, status, headers, config) {
                    console.log('error');
                });
        console.log($scope.thumbnails);
        }

        $scope.showVideo = function(scenario){
            Data.setData(scenario);
            $location.path('/');

            //Data.setData($scope.scenarios[$scope.thumbnail.indexOf(thumbnail)]);
        }

    }])

The problem is that in $scope.showVideo = function(scenario) when i call Data.setData(scenario); I get the error TypeError: Object #<Object> has no method 'setData'

Answer 1

.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, Data)

You're missing one argument for the $location service here. It should be

.controller('scenariosCtrl', ['$scope', '$http', '$location', 'Data', function($scope, $http, $location, Data)