How to Define Two Angular Apps/Modules in One Page

How to define two angular apps / modules in one page?

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
-- http://docs.angularjs.org/api/ng.directive:ngApp

AngularJS Multiple ng-app within a page

So basically as mentioned by Cherniv we need to bootstrap the modules to have multiple ng-app within the same page. Many thanks for all the inputs.

var shoppingCartModule = angular.module("shoppingCart", [])shoppingCartModule.controller("ShoppingCartController",  function($scope) {    $scope.items = [{      product_name: "Product 1",      price: 50    }, {      product_name: "Product 2",      price: 20    }, {      product_name: "Product 3",      price: 180    }];    $scope.remove = function(index) {      $scope.items.splice(index, 1);    }  });var namesModule = angular.module("namesList", [])namesModule.controller("NamesController",  function($scope) {    $scope.names = [{      username: "Nitin"    }, {      username: "Mukesh"    }];  });angular.bootstrap(document.getElementById("App2"), ['namesList']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">  <h1>Your order</h1>  <div ng-repeat="item in items">    <span>{{item.product_name}}</span>    <span>{{item.price | currency}}</span>    <button ng-click="remove($index);">Remove</button>  </div></div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">  <h1>List of Names</h1>  <div ng-repeat="_name in names">    <p>{{_name.username}}</p>  </div></div>

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

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}}">
...

How to run two separate Angular js apps in the same page

It is possible, but it requires a little bit coding by hand. You need to bootstrap the angular apps on your own. Don't worry, it is not that complicated

Do not add ng-app attributes in your HTML
Make sure you can fetch the DOM elements holding the app
When DOM is loaded you need to start the apps on your own: angular.bootstrap( domElement, ['AppName']);

Fork of you plunker which works: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

Call multiple modules in a single page?

You use this:

ng-app="module1"

this involve that your app is module1.
You should create a new module (ex: theapp) that require the two modules.

var app = angular.module('theapp', ['module1', 'module2']);

then replace the ng-app with:

ng-app='theapp'

then you can have:

<body ng-app="theapp" ng-controller="controller2">
  <h3>Creating Custom Element Directive</h3><br />
  <div>
    <btn-directive></btn-directive>
    </div>
  <h1>my module2</h1>
  <div>
   Name: {{name}}
    </div>
</body>

Two angular app on same page - only one works at a time

https://docs.angularjs.org/api/ng/directive/ngApp

Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them
using angular.bootstrap instead. AngularJS applications cannot be
nested within each other.

multiple apps in single page in angular js

You need to bootstrap each app as follows:

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp1Div'),['myApp1']);

var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp2Div'),['myApp2']);

And HTML

<div id="myApp1Div" >
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div id="myApp2Div" >
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

EDIT
JSFiddle

How to Define Two Angular Apps/Modules in One Page