ng-repeat is not working with ng-app value

Question

The directive ng-repeat is not working properly when we give ng-app="MyApp" and which is working without passing any value to the ng-app directive which is a strange behaviour to me. I am new to the AngularJS. Is this behaviour expected?

Please throw some light on this.

<!DOCTYPE html>
<html>
  <head>
    <title>Books Buddy</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-app="MyApp">
    <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
      <ul>
        <li ng-repeat="book in books">{{book}}</li>
      </ul>
    </div>
  </body>
</html>

yes, this is how angular work.... because you are initiating your array inside html so you don't need to declare any app name...... in other case if you are initiating your array through controller so you need to make a custom app and work inside a controller... — Akshay Kumar, Feb 15 '16 at 11:21
Thank you for reply @AkshayKumar, So it means that even if i try with some small operations like ng-model also, ng-app should not contains ng-app="myApp" right? — M.S.Naidu, Feb 15 '16 at 11:28
yes, you can try ng-model also without declaring any app name... but i recommend the practice of making your own custom app.. because its a best practice.. — Akshay Kumar, Feb 15 '16 at 11:33
You cannot use a named app in ng-app if you do not provide the stuff via `angular.module('MyApp', []);` — Benjamin Abt, Feb 15 '16 at 11:57

score 1 · Answer 1 · answered Feb 15 '16 at 11:26

1

When using only ngInit and no controllers, directives or services, you don't need the ngApp. That's how angular works. If you're specifying MyApp as your ngApp angular won't be able to find it and then you get your error.

answered Feb 15 '16 at 11:26

Luka Jacobowitz

22,795
5
39
57

score 0 · Answer 2 · answered Feb 15 '16 at 11:25

Just male ng-app='' it should work

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<body ng-app="">
 <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <ul>
   <li ng-repeat="book in books">{{book}}
   </li>
 </ul>
 </div>
</body>
</html>

score 0 · Answer 3 · answered Feb 15 '16 at 11:29

This is your way (here we are doing every thing in html only so we don't need custom app.. we can just say "hey angular just do what you can do with things")

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app>
 <div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <ul>
   <li ng-repeat="book in books">{{book}}
   </li>
 </ul>
 </div>
</body>
</html>

This is a correct way (in this we are declaring our own app so we need to set a name for our app..)

<!DOCTYPE html>
<html>
<head><title>Books Buddy</title></head>
<body ng-app = "myApp">
 <div ng-controller="mainCtrl">
 <ul>
   <li ng-repeat="book in books">{{book}}</li>
 </ul>
 </div>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("mainCtrl", function($scope){
        $scope.books = ['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava'];
    });

</script>
</html>

score 0 · Answer 4 · answered Feb 15 '16 at 12:04

Use ng-model on books, and here there is no need to wright ng-app="myApp"because You are not initializing you app seperately, above code is not that dynamic so you can use ng-app directly

Try this :

<!DOCTYPE html>
<html>
<head>
<title>Books Buddy</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">    </script>
</head>
<body ng-app >
<div ng-init="books=['EffectiveJava','ServletBlackbook','CodeCleaner','HeadFirstJava']">
 <div ng-model="books" >
  <ul ng-repeat="book in books" >
    <li>{{book}}</li>
  </ul>
</div>
</div>
</body>
</html>

ng-repeat is not working with ng-app value

4 Answers4