angular module value not injected - angularjs

Question

I would like to store some information through module's function .value. I configure like follow
app:
angular.module('MyApp1', ['ngRoute', 'ngCookies', 'ngAnimate', 'angular-loading-bar' ])
angular.module('MyApp2', ['ngRoute', 'ngCookies', 'ngAnimate', 'angular-loading-bar'])
angular.module('MyApp3', ['ngRoute', 'ngCookies', 'ngAnimate', 'angular-loading-bar'])
.value('LoggedUser', {email: '',role: ''})
controller:
angular.module('MyApp1').controller('LoginController', ['LoggedUser', function ($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser) { }]);
but I receive an error about injection module, which AuthenticationService, StorageService and SessionService are factory and correctly work.
Any suggestions?
UPDATE 1
Understood what #JB Nizet said. Modified like this:
angular.module('MyApp1', ['ngRoute', 'ngAnimate', 'angular-loading-bar'])
.value('LoggedUser', {
email: '',
role: ''
});
angular.module('MyApp2', ['ngRoute', 'ngAnimate', 'angular-loading-bar']);
angular.module('MyApp3', ['MyApp1', 'ngRoute', 'ngAnimate', 'angular-loading-bar'])
Is correct the dependencies? The life cycle must be:
in MyApp1 I insert some info in LoggedUser.
in MyApp3 I read from LoggedUser (from MyApp1)
MyApp2 is stand alone and it don't have any dependecies from MyApp1 and MyApp3.
UPDATE 2
This night I simplify the modules. Now I have only 2 modules. The modules are independent of each other
angular.module('MyApp1', ['ngRoute', 'ngAnimate', 'angular-loading-bar'])
angular.module('MyApp2', ['ngRoute', 'ngAnimate', 'angular-loading-bar'])
I create a factory for store global variables, this:
angular.module('MyApp2').factory('LoggedUserInformationService', function ($rootScope) {
var LoggedUser = {};
return {
Set: function (email, isAdmin) {
LoggedUser.Email = email;
LoggedUser.IsAdmin = isAdmin;
return LoggedUser;
},
Get: function () {
return LoggedUser;
}
};
//var LoggedUser = {};
//var loggedUserService = {};
//loggedUserService.Get = function () {
// return $rootScope;
//};
//loggedUserService.Set = function (email, battleTag, isAdmin) {
// User = {};
// User.Email = email;
// User.IsAdmin = isAdmin;
// $rootScope.$emit('LoggedUser', User);
//return loggedUserService;
}).run(function () { });
but when I Set data in a page, in other the get is undefined.
angular.module('MyApp2').controller("MenuController", function ($scope, LoggedUserInformationService) {
$scope.init = function () {
console.log(LoggedUserInformationService.Get());
}
});
Why is undefined?

Answer 1

You need to inject all dependencies in your controller.
angular.module('MyApp1').controller('LoginController',
['$scope', '$cookies', '$window', 'AuthenticationService', 'StorageService', 'SessionService', 'LoggedUser',
function ($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser) {
// function def
}
]
);
or like this
angular.module('MyApp1').controller('LoginController', loginCtrl);
loginCtrl.$inject = ['$scope', '$cookies', '$window', 'AuthenticationService', 'StorageService', 'SessionService', 'LoggedUser'];
function loginCtrl($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser){
//function def
}

Answer 2

count of dependencies that injected by inline annotation must be match count of parameters passing into function (implicit injected) .
Unknown provider: LoggedUserProvider <- LoggedUser <- LoginController
above error occurs because angular can't to recognize LoggedUser (that injected by inline annotation way) related to which parameters those are passing into function.
when using this type of annotation, take care to keep the annotation
array in sync with the parameters in the function declaration
angular.module('MyApp1', []);//set injections you need
angular.module('MyApp1').controller(
'LoginController'['$scope','$cookies','$window','AuthenticationService','StorageService','SessionService','LoginController', 'LoggedUser',
function ($scope, $cookies, $window, AuthenticationService, StorageService, SessionService, LoggedUser) {
//your code
});
furthermore you declare 3 modules those are separated and as JB Nizet and maher said you should have 3 sub-module and one main module and inject 3 module as sub modules of main module :
angular.module('MainApp', ['ngRoute', 'ngAnimate', 'angular-loading-bar','MyApp1','MyApp2','MyApp3']);
angular.module('MyApp1', []);
angular.module('MyApp2', []);
angular.module('MyApp3', []);