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/$injecto…

Accepted Answer

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;}
);
```

Service will not inject into controller

Solution

Problem