Angularjs : Using common service in different modules

Question

I am trying to use the same service for different modules. There are many modules so i tried to inject them in a parent module. Something like this:

var app=angular.module('myapp',['module_1','module_2',....,'module_n']);


var module_1=angular.module('myapp1',[]);
var module_2=angular.module('myapp2',[]);
var module_3=angular.module('myapp3',[]);
.
.
.
var module_n=angular.module('myappN',[]);

and the service which is common to all the n modules is like this:

.service('myService',function(){
...doing something here...
});

Now I am not able to figure out how to use this service for all the submodules.
With which module should I associate this service ?
I tried doing app.service('myService',function(){...}), but it did'nt work.
Where am I going wrong?

EDIT 1:
Moreover I am trying to share a variable with all these submodules using the service. I am not sure if, I am doing the right thing by using a service for sharing variable or should I use a Provider or Factory for this job.

EDIT 2:
I found these links, but I could not grasp the answer. Refer to them and please provide my answer
How to share a variable between multiple modules in AngularJS
Passing variable between controllers which are on different modules

Answer 1

Lets suppose you want to build a Service to share a certain variable between two Controllers. You should be able to use your Service doing the following:

MyService.js

// Lets suppose you want to share a certain variable between controllers
angular
.module('myApp')
.service('myService', function () {

  // If you wish you can inject and use $scope
  var vm = this;
  // Variable to share
  vm.sharedItem;

  // Method to set a certain value into a variable
  function setItem(item){
   vm.sharedItem = item;
  }

  // Method to get that variable
  function getItem(){
    return vm.sharedItem;
  }

  // Exposing your methods
  return {
    setItem     : setItem
    getItem     : getItem
  }
});

SetController.js

angular
.module('myApp')
.controller('SetController', SetController);

  // Inject your Service
  function SetController(myService) {

    var vm = this;
    // variable used to set the value
    vm.setMe = 'hello';

    // Call `setItem()` method from `myService` -> sharedItem will get setMe value
    myService.setItem(vm.setMe);

    console.log("Set shared item "+vm.setMe);
  };

GetController.js:

angular
.module('myApp')
.controller('GetController', GetController);

  // Inject your Service
  function SetController(myService) {

    var vm = this;
    // variable used to get shared the value
    vm.getMe= null;

    /* Call `getItem()` method from `myService` to get the shared 
     * value and assign it to `getMe`*/
    vm.getMe = myService.getItem();

    console.log("Got shared item "+vm.getMe);
};

I remind you can access this.var in your view using controllerName.var. It is a good solution to make sure you are using a certain controller. You can always use $scope if you wish.

I hope I've been helpful.