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

Question

I have two angular app blocks in a page. each one works individually , but when i try to run both only first one works.

<body>
<div ng-app='myApp' class="Freight">
    <div ng-controller="MainCtrl">
        <div>
            <ul>
                <li ng-repeat="prdElement in palletElement">
                    <span>
                        <input type="text" ng-model="prdElement.name" placeholder="Name" required />
                    </span>

                    <ul>
                        <li ng-repeat="elemnt in prdElement.product">
                            <div class="prd-box">
                                <span>
                                    <input type="text" ng-model="elemnt.Code" placeholder=" Code" required />
                                </span>
                                <span>
                                    <input type="text" ng-model="elemnt.name" placeholder=" Description" required />
                                </span>
                                <span>
                                    <input type="text" ng-model="elemnt.class" placeholder=" Class" required />
                                </span>
                                <span>
                                    <input type="text" ng-model="elemnt.quantity" placeholder=" Quantity" required />
                                </span>
                                <span>
                                    <input type="text" ng-model="elemnt.weight" placeholder=" Weight" required />
                                </span>
                                <span ng-hide="elemnt.length == 1">
                                    <a href="#" ng-click="prdElement.product.splice($index, 1)">Remove Item</a>
                                </span>

                            </div>
                        </li>
                        <li>
                            <a href="#" ng-click="newPrdItem(prdElement,$event)">Add Item</a>

                        </li>
                    </ul>
                    <a href="#" ng-click="newPalletItem(palletElement,$event)">Add Pallet</a>
                    <a href="#" ng-click="prdElement.splice($index, 1)">Remove Pallet</a>
                    <a href="#">Remove Pallet</a>

                </li>
            </ul>
        </div>
        <div>
            <button ng-click="showitems($event)">Submit</button>
        </div>
        <div id="displayitems">{{palletElement}}</div>
    </div>
</div>

<div ng-app='PackageApp' class="Freight">
    <div ng-controller="PackageCtrl">
        <div>
            <ul>
                <li ng-repeat="prdPackageElement in packageElement">
                    <span>
                        <input type="text" ng-model="prdPackageElement.name" placeholder="Name" required />
                    </span>


                </li>

            </ul>
        </div>
        <!--<div>
            <button ng-click="showitems($event)">Submit</button>
        </div>
        <div id="displayitems" style="visibility:hidden;">
            {{prdElement}}
        </div>-->
    </div>
</div>

in this case only first app 'MyApp' works.

Detailed

Fiddle here

Possible duplicate: http://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page — laruiss, Oct 08 '14 at 11:32

score 3 · Accepted Answer · answered Oct 08 '14 at 11:52

3

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.

answered Oct 08 '14 at 11:52

sylwester

16,498
1
25
33

Addition: Using multiple angular apps on one page is most likely not what you want to do. If these "apps" are related in any way, you'll be better off using multiple controllers and views/routes inside one common app module. – yerforkferchips Oct 08 '14 at 11:54

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

1 Answers1