AngularJS: Nested named views from different modules - angularjs

Question

I'm using angular-ui-router to load nested named views.
In the index.html file I have an unnamed view and a named one.
Index.html:
<div ui-view="header"></div>
<div ui-view=""></div>
I load header.html to named view header. The header view has two named views contactsSearch and countries.
Header.html:
<div ui-view="contactsSearch"></div>
<div ui-view="countries"></div>
In the unnamed view of the index.html file I want to load contacts.html.
Contacts.html:
Contacts List
I use three modules: myApp, countries and contacts. I've configured the routes for each module.
MyApp module:
angular.module('myApp', ['ui.state', 'contacts', 'countries'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state("home",
{
url: "/home",
abstract: true,
views: {
'header': {
template: "<div class ='row' ui-view ='countriesList'></div><div class ='row' ui-view ='contactsSearch'></div>"
},
"": {
template: "<div ui-view></div>"
}
}
});
}]);
Countries module:
angular.module('countries', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state("home.countries", {
url: "/countries",
views: {
'countriesList': {
template: "<p>Countries</p>"
}
}
});
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home.countries');
}]);
Contacts module:
angular.module('contacts', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function ($stateProvider, $routeProvider) {
$stateProvider
.state("home.contacts", {//should be loaded to the unnamed view in index.html
url: "",
views: {
'contactsList': {
template: "<p>Contacts List</p>"
}
}
})
.state("home.contactsSearch", {
url: "/contactsSearch",
views: {
'contactsSearch': {
template: "<p>Contacts Search</p>"
}
}
});
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home.contactsSearch');
}]);
My code is not correct because nothing is being displayed and I cannot figure out why. After some investigation, I've found out that a parent can have only one state, but I need home.contacts, home.contactsSearch and home.countries to have the same parent: home.
Can someone please help me with this?
I've created a jsfiddle for more details: https://jsfiddle.net/cjtnmbjw/3/
Thank you