Service will not inject into controller

Question

I've made a handful of Angular applications in the past, but have never really made use of modules. I'm creating an Ionic app right now (which uses Angular) and for some reason I cannot get my services to inject into the controllers.

controllers.js

angular.module('myapp.controllers', [])
.controller('StreamCtrl', ['$scope', 'StreamService',
function($scope, StreamService) {
    $scope.playlists = [1,2,3,4];
}]);

services.js

angular.module('myapp.services', [])
.factory('StreamService', ['$scope', function($scope) {
    var self = {
        'fetching' : false,
        'streamItems' : []
    };
    return self;
]);

app.js

angular.module('myapp', ['ionic',
                        'myapp.services',
                        'myapp.controllers',
                        'ngCordova',
                        'LocalStorageModule'])
// And lots of other code that isn't needed for this question.

So when I try and load the StreamCtrl I end up getting the following error:

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <-StreamService
http://errors.angularjs.org/1.3.6/$injector/unpr?p0=<ion-nav-view name="menuContent" class="view-container" nav-view-transition="ios">copeProvider%20%3C-%20%24scope%20%3C-%20StreamService
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7888:12)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11806:19
at Object.getService [as get] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11953:39)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11811:45
at getService (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11953:39)
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11985:13)
at Object.enforcedReturnValue [as $get] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11847:37)
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11812:37
at getService (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11953:39)

Answer 1

See this working fiddle ,

You are treating service as if it was a controller, never inject a $scope into service, its not there

var myApp = angular.module('myApp',['myapp.services','myapp.controllers']);

angular.module('myapp.controllers', [])
.controller('StreamCtrl', ['$scope', 'StreamService',
function($scope, StreamService) {
    $scope.playlists = [1,2,3,4];
}]);

angular.module('myapp.services', []).factory('StreamService',  function() {
    var self = {
        'fetching' : false,
        'streamItems' : []
    };
    return self;}
);

Answer 2

Your error clearly says there is problem inside StreamService factory.

You could never inject $scope inside factory. Removing $scope dependency will solve your issue.

Factory basically used to expose singleton methods, common and sharable data. Usually we write any service call or method which can be accessible by any module who inject it using its dependancy.

Factory

angular.module('myapp.services', [])
.factory('StreamService', [function() {
    var self = {
        'fetching': false,
        'streamItems': []
    };
    return self;
}]);

Working fiddle.

Hope this could help you. Thanks.