ng-repeat not working as expected

Question

I recently started learning angularjs, trying out different examples.

Due to some reason ng-repeat is not working

Appreciate any help.

    <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="angular.js@*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
var app = angular.module('myapp', []);
app.controller('myCtrl', function ($scope) {

    $scope.fname = "joe";
    $scope.lname = "mathew";
    $scope.fullname = function () {
        return $scope.fname + " " + $scope.lname;
    }

});
    </script>
  </head>

  <body>
    <div ng-controller="myCtrl" ng-app="myapp">
        First name :       <input type="text" ng-model="fname" />
      <br />

        Last name :       <input type="text" ng-model="lname" />
      <br />
      <br />

        Full name : {{fname + " " + lname}}
    </div>
    <div>
      <ul ng-controller="namesctrl" ng-app="myapp2">
        <li ng-repeat="item in names">
                {{ item.name + ', ' + item.country }}
            </li>
      </ul>
      <script>
            var myapp2 = angular.module('myapp2', []).controller('namesctrl', ["$scope", function ($scope) {
                $scope.names = [
                    { name: 'Jani', country: 'Norway' },
                    { name: 'Hege', country: 'Sweden' },
                    { name: 'Kai', country: 'Denmark' }
                ];
            }]);
        </script>
    </div>
  </body>

</html>

When I run the above example I see the below output

{{ item.name + ', ' + item.country }}

but not the full list.

Do you need to maintain two ng-apps and two ng-controllers associated with them? — ShivangiBilora, Sep 21 '15 at 10:54

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

There is nothing wrong with ng-repeat. I modified your code a little bit in this plunk: http://plnkr.co/edit/nmkB4dZEC1YSLMiK4RXf?p=preview

And the changes that I made include this:

var app = angular.module('myapp', []);
app.controller('myCtrl', function ($scope) {

    $scope.fname = "joe";
    $scope.lname = "mathew";
    $scope.fullname = function () {
        return $scope.fname + " " + $scope.lname;
    }

});
app.controller('namesctrl', function ($scope) {
          $scope.names = [
              { name: 'Jani', country: 'Norway' },
              { name: 'Hege', country: 'Sweden' },
              { name: 'Kai', country: 'Denmark' }
          ];
      });

For more reference, you can read this:

AngularJS Multiple ng-app within a page

score 0 · Answer 2 · answered Sep 21 '15 at 11:49

0

You need to bootstrap the second ng-app maually as we are using two. and assign any id to that and bootstrap it as follows

angular.bootstrap(document.getElementById("App2"),['myapp2']);

Please check for the plunker below

answered Sep 21 '15 at 11:49

Vasanth

212
1
8

ng-repeat not working as expected

2 Answers2