Angularjs sample "ng-repeat" not rendering for me

Question

I'm learning Angularjs. I created a simple sample "ng-repeat" functionality straight of w3schools samples but couldn't make it to work.... Any clue on what i'm doing wrong here? Thanks in advance.

I have attached my sample code i'm trying to make it work here....

<!DOCTYPE html>
<html>
<head>
   <!-- bootstap-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">   
     <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/sass-bootstrap/dist/css/bootstrap.css" />
   <!-- bootstrap end-->
    <title>TEST TEST</title>


  </head>
<body>

  <div ng-app="testApp" ng-controller="testCtrl">
  <p>
    first Name: <input type="text" ng-model="fname"> 
  </p>
    <p>
    last Name: <input type="text" ng-model="lname"> 
  </p>
  <p>
      Hello: {{fullName() | uppercase}}
  </p>
  </div>

   <div ng-app="testApp1" ng-controller="testNamesCtrl">
     <h5>Diplaying Countries via RESTAPI</h5>
     <ul>
        <li ng-repeat="x in nnames">
        {{ x.Name + ', ' + x.Country }}
       </li>
     </ul>
   </div>

   <!-- bower:js -->
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
   <!-- endbower -->

   <!-- custom Angulajs --> 
   <script src="scripts/controllers/testCtrl.js"></script>
   <script>
      angular.module('testApp1',[]).controller('testNamesCtrl',function($scope){
         $scope.nnames = [
            {Name:'Jani',Country:'Norway'},
                {Name:'Hege',Country:'Sweden'},
            {Name:'Kai',Country:'Denmark'}
         ];
      });
  </script>

</body>
</html>

whats is the error in browser console ? do a f12 and post the error — Liam, Aug 12 '15 at 02:49
This looks fine to me and works : [plnkr.co](http://plnkr.co/edit/9N4LFWoozew2dupHE6Ku?p=preview). I would guess you're getting a 404 on one of your files your're trying to load. — bluetoft, Aug 12 '15 at 03:53
There is no error in console. But i removed the DIV tags for testApp ( — Newbee, Aug 12 '15 at 05:16

score 0 · Answer 1 · answered Aug 12 '15 at 03:44

0

Don't use the {{ x.Name+ ', ' + x.Country}} syntax in the markup. Instead try this

{{x.Name}}, {x.Country}

Angular doesn't work like a traditional string when inserted into the markup so there is no need to format it as such. It will just insert whatever is in the model into the DOM as if it were static text you yourself wrote.

answered Aug 12 '15 at 03:44

tuckerjt07

902
1
12
31

While this is helpful for understanding angular, it doesn't address the question or provide a solution to the problem at hand... – bluetoft Aug 12 '15 at 03:57
Thanks but still couldn't make it work. But when i removed the DIV tags for testApp (
– Newbee Aug 12 '15 at 05:25

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

@Newbee read this answer that explain your question "...Curious on why the top DIV tags for testApp is breaking bottom DIV tag for testApp1..."

edited May 23 '17 at 12:29

Community

1
1

answered Aug 12 '15 at 05:42

macrog

2,085
1
22
30

Angularjs sample "ng-repeat" not rendering for me

2 Answers2