I want to use two angularjs modules/app in the same web page

I created two angular modules (navigation and translation) saved into two different files, and I want to use at the same time in my index.php . What I understand is that I can run only one module/app per html page.

(Both app are running perfectly when I use them seperately)

PS: I'm trying to iclude my two modules into the <html> tag not into two differents <div> because 'myApp2' is used to translate all the page text and 'myApp' is used for navigation and It doesn't contain a controller. (my two app/module doesn't run into specific <div> )

Here is the content of my files:

translate.js

//my Json structure for translation is located before this code

var app2 = angular.module('myApp2', ['pascalprecht.translate']);

app2.config(['$translateProvider', function ($translateProvider) {
  // add translation tables
  $translateProvider.translations('en', translationsEN);
  $translateProvider.translations('fr', translationsFR);
  $translateProvider.preferredLanguage('en');
  $translateProvider.fallbackLanguage('en');
}]); 

app2.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {

  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
}]);

navigationMapper.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        title: "Home",
        description: "MyHome",
        templateUrl : "../pages/home.php"
    })
    .when("/about-us/partners", {
        title: "Partners",
        description: "partners",
        templateUrl : "../pages/about-us/partners.php"
    })
    .when("/contact-us", {
        title: "Contact Us",
        description: "contact cs",
        templateUrl : "../pages/contact-us.php"
    });          
});


//Displaying dynamically the page title and change the meta description
app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
        $rootScope.description = current.$$route.description;    
    });
}]);

I want run my two modules/app in the same page, like:

index.php

<html ng-app="myApp" ng-app="myApp2"  ng-controller="Ctrl" lang="en">

But only one run at once, like:

<html  ng-app="myApp2"  ng-controller="Ctrl" lang="en">

or:

<html  ng-app="myApp" lang="en">

Solution

The Solution as Sodimu Segun Michael suggested:

I merged the 2 .js files into 1 file, because I have to include my app in the <html> tag to be able to use the translation and navigation mechanism.

Manually bootstrap is not a good solution for my case because I'm not using 2 app/modules into two different <div>

Also its not possible to use 2 different app/modules with nested <div>

translation-navigation.js

var app = angular.module("myApp", ["ngRoute", 'pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
  // add translation tables
  $translateProvider.translations('en', translationsEN);
  $translateProvider.translations('fr', translationsFR);
  $translateProvider.preferredLanguage('en');
  $translateProvider.fallbackLanguage('en');
}]); 

app.controller('Ctrl', ['$translate', '$scope', function ($translate, $scope) {

  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
}]);

//Displaying dynamically the page title and change the meta description
app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
        $rootScope.description = current.$$route.description;    
    });
}]);


//URL navigation mechanism

app.config(function($routeProvider) {
$routeProvider
.when("/", {
    title: "Home",
    description: "MyHome",
    templateUrl : "../pages/home.php"
})
.when("/about-us/partners", {
    title: "Partners",
    description: "partners",
    templateUrl : "../pages/about-us/partners.php"
})
.when("/contact-us", {
    title: "Contact Us",
    description: "contact cs",
    templateUrl : "../pages/contact-us.php"
});          
});

in the html file include the app and call the translation controller

on top of index.php:

<html ng-app="myApp" ng-controller="Ctrl" lang="en">
    <head>
        <meta charset="utf-8">
        <title ng-bind="title"></title>
        <meta name="description" content="{{description}}">
...