AngularJS the scope value does not display in the views

Question

I am a newbie in angularjs; the scope value are not displaying in the views.

I have two apps: myApp and ram - each one having their controllers.

I'm trying to display scope values. Only myApp shows values but ram does not.

<div ng-app="myApp" ng-controller="myCtrl">

  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}

</div>

<div ng-app="ram" ng-controller="myCtrl2">

  First Name: <input type="text" ng-model="firstName2"><br>
  Last Name: <input type="text" ng-model="lastName2"><br>
  <br>
  Full Name: {{firstName2 + " " + lastName2}}

</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
  });

</script>

<script>
  var app2 = angular.module('ram', []);
  app2.controller('myCtrl2', function($scope) {
    $scope.firstName2= "ram";
    $scope.lastName2= "babu";
  });
</script>

you can't have two ng-apps on one page. If you want to do that, use angular.bootstrap instead. — Michael Kang
– Michael Kang, Commented Jan 13, 2016 at 11:51
You have to bootstrap the modules to have multiple ng-app in page. — Muhammad Azeem
– Muhammad Azeem, Commented Jan 13, 2016 at 11:53

Muhammad Azeem · Accepted Answer · 2016-01-13 11:54:44Z

You have to bootstrap modules to have multiple ng-app in your page.

<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
    <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>
    <script>
            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>
</body>
</html>

Chris N. Tyler · Accepted Answer · 2016-01-13 12:04:50Z

0

You can not use two apps on the same page. If you do that then you will need to use Angular Bootstrap.

First assign your second div an id e.g id ="ramID" to something like below

<div id="ramID" ng-app="ram" ng-controller="myCtrl2">

then add this line to your code to your script

angular.bootstrap(document.getElementById("ramID"),['ram']);

hope it helps.

answered Jan 13, 2016 at 12:04

Chris N. Tyler

518 bronze badges

Collectives™ on Stack Overflow

AngularJS the scope value does not display in the views

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related