using service in different controllers files

Question

Service - optionService.js
controllers - app.js & welcomeCtrl.js & otherCtrl.js

app.js

var app = angular.module('mainapp', ['mainapp.welcome','optionServiceModule']);
app.controller('mainappCtrl', function ($scope,optionService) {
   optionService.fetchOptionDetails().success(function(response){
        $scope.option = response;
   });
});

welcomeCtrl.js

    var app = angular.module('mainapp.welcome', ['optionServiceModule']);

    app.controller('welcomeCtrl',[function($scope,optionService) {
        optionService.fetchOptionTwoDetails().success(function(response){
            $scope.OptionTwo = response;
        });
    }]);

optionService.js

var app = angular.module('optionServiceModule',[]);

app.factory('optionService',['$http',function($http) {
  var obj = {};

    obj.fetchOptionDetails = function(){ 
        return $http.get('localhost/api/option/optionOne');
    }

    obj.fetchOptionTwoDetails = function(){
        return $http.get('localhost/api/option/optionTwo');
    }
 return obj;
}]);

optionService is working fine in app.js but giving error in WelcomeCtrl.js

Error

Cannot read property 'fetchOptionTwoDetails' of undefined

wanna know how to use a service in multiple controller file ?

Thank you In Advance

Answer 1

inject the $scope and optionService to controller as string like this

app.controller('welcomeCtrl',['$scope','optionService',function($scope,optionService) {
        optionService.fetchOptionTwoDetails().success(function(response){
            $scope.OptionTwo = response;
        });
    }]);