---
title: "How to use Multiple ng-App  in a single Page"  
description: "How to use Multiple ng-App  in a single Page"  
author: "Anonymous User"  
published: 2016-02-22  
updated: 2016-02-22  
canonical: https://www.mindstick.com/forum/33991/how-to-use-multiple-ng-app-in-a-single-page  
category: "angular js"  
tags: ["jquery", "angular js"]  
reading_time: 2 minutes  

---

# How to use Multiple ng-App  in a single Page

We want to use to use [Multiple](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) ng-App in a single Page. How to do this please help me.

## Replies

### Reply by Anonymous User

**js file:** \

> ```
> @{    Layout = null;} <!DOCTYPE html> <html><head>    <meta name="viewport" content="width=device-width" />    <script src="~/Scripts/jquery-1.9.1.js"></script>    <script src="~/Scripts/angular.js"></script>     <title>Forum</title></head><body>    <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">        <h1>Your order</h1>        <table>            <thead>                <tr>                    <th>Product Name</th>                    <th>Price</th>                    <th>Action</th>                </tr>            </thead>            <tbody ng-repeat="item in
> items">                <tr>                    <td>{{item.product_name}}</td>                    <td>{{item.price | currency}}</td>                    <td>                        <button ng-click="remove($index);">Remove</button>                    </td>                 </tr>            </tbody>         </table>     </div>    <div id="App2" ng-app="namesList" ng-controller="NamesController">        <h1>Customer Details</h1>       Name: <input id="name" type="text" ng-model="Name" />        <br />      Email:
> <input id="email" type="text" ng-model="Email" />        <br />       Contact:
> <input id="contact" type="text" ng-model="mobile_no" />    </div>    <script>        var shoppingCartModule = angular.module("shoppingCart",
> [])        shoppingCartModule.controller("ShoppingCartController", function ($scope) {            $scope.items = [                  {                      product_name: "HP Pavilion 15-ab216TX Notebook",                      price: 48500                  },                  {                      product_name: "HP 15-AC116TX Laptop",                      price: 36299                  },                  {                      product_name: "HP 15-AC119TX Laptop",                      price: 39799                  },                  {                      product_name: "HP 15-ac118tu Notebook",                      price: 18999                  },                   {                       product_name: "HP 15-AF114AU Notebook",                       price: 25489                   },            ];            $scope.remove = function (index) {                $scope.items.splice(index, 1);            }        });        var namesModule = angular.module("namesList", [])        namesModule.controller("NamesController", function ($scope) {            $scope.Name = "Aditya Kumar";            $scope.Email = "adityasingh06630@@gmail.com";            $scope.mobile_no = "8953249451";        });
> angular.bootstrap(document.getElementById("App2"), ['namesList']);    </script></body> </html>
> ```

## Output:

\


---

Original Source: https://www.mindstick.com/forum/33991/how-to-use-multiple-ng-app-in-a-single-page

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
