AngularJS throws Unknown provider: $scopeProvider <- $scope error when I try to use modules

Question

I have just started with AngularJS The following code gives an error in the console.

Unknown provider: $scopeProvider <- $scope <- newActiveOrdersModel . I have researched but it looks like Unknown Provider error can happen for a variety of reasons.It would be nice if anyone could point out where I am going wrong ?

var app;
(function(angular){

    app = angular.module('OrdersDashboard',[]);
    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/current/new', {templateUrl: 'orders/partials/new_current', controller: 'newActiveOrdersCtrl'}).
            otherwise({redirectTo: '/'});
    }]);
    app.service('newActiveOrdersModel', ['$scope', '$rootScope',
        function($scope, $rootScope){

            this.Orders=["This is a test order"];
            this.fetchOrders = function(){

                console.log("This is a test order");
                this.Orders=["This is a test order1111"];
            };
        }]);
    app.controller('newActiveOrdersCtrl', ['$scope', '$rootScope', 'newActiveOrdersModel',
        function($scope, $rootScope, newActiveOrdersModel){

            $scope.test="Hello World";
        }]);

})(angular);

It seems like Angular Js cannot recognize "newActiveOrdersModel".

Answer 1

This just a guess but I don't know why you have $scope listed as a dependency of your service. I think something like this

 app.service('newActiveOrdersModel', ['$rootScope',
    function($rootScope){..}]

will solve the error. Also I wouldn't include $rootScope unless you absolutely need it. It's generally considered bad practice in Angular to store stuff in the $rootScope.