Angular - 2+ ng-app directives in the same html - angularjs

Question

I need to add a controller with a function and another function to replace the { with [[ (I need to use Jekyll).
I have two ng-app:
myApp
invoice
Two files Javascript:
myApp.js
invoice.js
The following content for each file:
myApp.JS
var myApp = angular.module('myApp', []);
myApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
HTML myApp:
<div ng-app="myApp" ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div>
Quantity: <input class="form-control" type="number" min="0" ng-model="qty">
</div>
<div>
Costs: <input class="form-control" type="number" min="0" ng-model="cost">
</div>
<div>
<b>
Total:
</b> [[qty * cost | currency]]
</div>
</div>
HTML invoice:
<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
<form class="form-horizontal" id="frm_basic">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">[[c]]</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
[[invoice.total(c) | currency:c]]
</span>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</form>
</div>
invoice.js:
var invoice1 = angular.module('invoice1', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
invoice1.controller('InvoiceController', function() {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = ['USD', 'EUR', 'CNY'];
this.usdToForeignRates = {
USD: 1,
EUR: 0.74,
CNY: 6.09
};
this.total = function total(outCurr) {
return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
};
this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
};
this.pay = function pay() {
window.alert("Thanks!");
};
});
It doesn't seem work properly. It is not replacing the { with [.
What is the mistake?
The error appear when I use both the html components in the page (myApp and invoice). If I disable "myApp" the second one works properly.
RESOLVED
I could not have more than 1 angular instance in the same html. AngularJS applications cannot be nested within each other.

Answer 1

According to the docs you have to use invoic1.config(....
The example works fine - provide a plunker with your code so we can help you.
var customInterpolationApp = angular.module('App', []);
customInterpolationApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
customInterpolationApp.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="App" ng-controller="DemoController as demo">
//demo.label//
</div>