I am getting following error with the angular factories I used

Question

I am getting following error, while I already injected factory into my controller, any help and suggestions will be really helpful in solving this problem.

---

Error: [$injector:unpr] http://errors.angularjs.org/1.3.16/$injector/unpr?p0=<div ng-view="" class="ng-scope">copeProvider%20%3C-%20%24scope%20%3C-%customerFactory
        at Error (native)
        at https://code.angularjs.org/1.3.16/angular.min.js:6:417
        at https://code.angularjs.org/1.3.16/angular.min.js:38:7
        at Object.d [as get] (https://code.angularjs.org/1.3.16/angular.min.js:36:13)
        at https://code.angularjs.org/1.3.16/angular.min.js:38:81
        at d (https://code.angularjs.org/1.3.16/angular.min.js:36:13)
        at Object.e [as invoke] (https://code.angularjs.org/1.3.16/angular.min.js:36:283)
        at Object.$get (https://code.angularjs.org/1.3.16/angular.min.js:34:268)
        at Object.e [as invoke] (https://code.angularjs.org/1.3.16/angular.min.js:36:315)
        at https://code.angularjs.org/1.3.16/angular.min.js:38:110(anonymous function) @ angular.js:11699$get @ angular.js:8628Xc @ angular.js:8292M @ angular.js:7800g @ angular.js:7149(anonymous function) @ angular.js:7028$get.h @ angular.js:7167l @ angular.js:7827x @ angular-route.js:935$get.m.$broadcast @ angular.js:14866(anonymous function) @ angular-route.js:618(anonymous function) @ angular.js:13292$get.m.$eval @ angular.js:14547$get.m.$digest @ angular.js:14363$get.m.$apply @ angular.js:14652l @ angular.js:9734P @ angular.js:9924H.onload @ angular.js:9865

customerFactory.js

(function () {

    var customerApp = angular.module('demoApp');

    function customerFactory($scope) {

        var customers = [{
            id: 1,
            name: 'a1',
            city: 'P1',
            orderTotal: '10.78',
            joined: '1990-12-10',
            order: [{
                id: 1,
                product: 'Shoes',
                total: 10.78
                        }]
            }, {
            id: 2,
            name: 'A2',
            city: 'I2',
            orderTotal: '12.99',
            joined: '2003-4-7',
            order: [{
                id: 2.1,
                product: 'Shirt',
                total: 10
                }, {
                id: 2.2,
                product: 'Shaker',
                total: 2.99
                    }]
                }, {
            id: 3,
            name: 'K3',
            city: 'K3',
            orderTotal: '6.787',
            joined: '2015-9-9',
            order: [{
                id: 3.1,
                product: 'Table',
                total: 4.00
                    }, {
                id: 3.2,
                product: 'chair',
                total: 2.787
                        }]
                }, {
            id: 4,
            name: 'R1',
            city: 'A1',
            orderTotal: '12.00',
            joined: '2003-12-1',
            order: [{
                id: 4.1,
                product: 'House',
                total: 9
                    }, {
                id: 4.2,
                product: 'car',
                total: 3
                        }]
                 }];

        // defining the factory object here
        var factory = {};
        factory.getCustomers = function () {
            return customers;
        };

        return factory;
    };

    customerApp.factory('customerFactory', customerFactory);
}());

here is a plnkr link http://plnkr.co/edit/A4XPuRxPSIajmh5mCAcN

Answer 1

Remove the $scope parameter from your factory implementation - you are not using $scope in there.

The $scope parameter is the cause of the error you are seeing.

Angular is trying to inject a dependency it is not aware of.

You don't need $scope in your factory - as you are not using it in there.

Your factory function definition should be this:

function customerFactory() {

Here is a working Plunker: http://plnkr.co/edit/uNJEjTBd1fhnCo4rTVTq?p=preview

(I also changed the routes to work in the plunker).