2

Here is my code , i take it from w3school.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "sparsh";
        $scope.lastName = "khandelwal";
    });
</script>
<title>Home Page</title>
</head>
<body>
    <div ng-app="myApp" ng-init="name='Sparsh'">
        <div ng-controller="myCtrl">{{firstName}}</div>
        <p>
            Name : <input type="text" ng-model="name">
        </p>
        <h1>Hello {{name}}</h1>
    </div>

    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
</body>
</html>

ng-repeat in second block is not working.

here is the output i get on browser enter image description here

Please help me out

Improve this question

4 Answers 4

Reset to default
1

Angular only bootstraps the first found application on the page, i.e. the first container with ng-app attribute. The second one you put, ng-app="" will be ignored. Although, you could manually bootstrap the second one with angular.bootstrap method, in your case it makes more sense to wrap entire body into the same app and remove the second ngApp directive:

<body ng-app="myApp">
    <div  ng-init="name='Sparsh'">
        <div ng-controller="myCtrl">{{firstName}}</div>
        <p>
            Name :
            <input type="text" ng-model="name" />
        </p>
        <h1>Hello {{name}}</h1>
    </div>
    <div  ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
</body>

Demo: http://plnkr.co/edit/UXTGEWOaRu82WpeOvuOz?p=preview

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

yeah its working!! . But as i am new so can you tell me what is the meaning of "Angular only bootstraps the first found application on the page".... what i guess is that it reads only the first ng-app and then ignore all the ng-app in that html page.
Yes, exactly. Angular will find only the first ng-app attribute and kick off template processing, directives/contollers/etc initialization. Any other ng-app are not considered.
hey i made changes accordingly: facing this issue stackoverflow.com/questions/29865205/…: please help me.
1

you can have only one ng-app in html page

so change your code as 

<body ng-app="myApp">
<div  ng-init="name='Sparsh'">
    <div ng-controller="myCtrl">{{firstName}}</div>
    <p>
        Name :
        <input type="text" ng-model="name" />
    </p>
    <h1>Hello {{name}}</h1>
</div>
<div  ng-init="names=['Jani','Hege','Kai']">
    <ul>
        <li ng-repeat="x in names">{{x}}</li>
    </ul>
</div>
</body>
Improve this answer

Comments

0

The problem is, that only one ng-app can be automatically bootstrapped per webpage. So the second ng-repeat does not get parsed because it is not contained within an app.

You need to manually bootstrap your apps with angular.bootstrap()

https://docs.angularjs.org/api/ng/function/angular.bootstrap

Improve this answer

Comments

0

This part of your code 

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
</div>

does not have an ng-app

ng-repeat only works within an ng-app

Improve this answer

1 Comment

In fact, this is not the problem which causes the ng-repeat to fail. See my answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.