AngularJS ng-app not working second time

Question

I am trying to create a basic label program with Angular JS. And it is my first program in angular. So I can not figure it out why the following code is not working.

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
    <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><br>
        <button class="btn" ng-click="invoice.pay()">Pay</button>
    </div>
</div>
<div ng-app ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div>
        Quantity: <input type="number" min="0" ng-model="qty">
    </div>
    <div>
        Costs: <input type="number" min="0" ng-model="cost">
    </div>
    <div>
        <b>Total:&#8377;</b> {{qty * cost}}
    </div>
</div>
<script src="js/angular.js"></script>
<script src="js/convert.js"></script>

the first part if the code is working perfectly, but the second part does not, however if I switch the div structure location, then the again the first section is working, 2nd does not, means there is a silly mistake that I can not able to find out. Please let me know my fault.

Better use another controller in same app , means 1 ng-app and 2 ng -controller — Ashutosh Jha, Mar 23 '17 at 05:07

score 1 · Accepted Answer · answered Mar 23 '17 at 05:06

Generally you don't need two "ng-app". Try to put the second section into the first one. Your code should be like this:

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
  <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><br>
    <button class="btn" ng-click="invoice.pay()">Pay</button>
  </div>
  <div ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div>
      Quantity: <input type="number" min="0" ng-model="qty">
    </div>
    <div>
      Costs: <input type="number" min="0" ng-model="cost">
    </div>
    <div>
      <b>Total:&#8377;</b> {{qty * cost}}
    </div>
  </div>
</div>

<script src="js/angular.js"></script>
<script src="js/convert.js"></script>

score 0 · Answer 2 · answered Mar 23 '17 at 05:05

By default only first App is initialised , if you want to use another app then you have to forcefully bootstrap it . Although it is not good practice

somthing like

angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, ['firstApp']);
   angular.bootstrap(dvSecond, ['secondApp']);
});

https://www.codeproject.com/Articles/862602/Define-multiple-Angular-apps-in-one-page

AngularJS ng-app not working second time

2 Answers2