I recently started delving into AngularJS, but I've hit a roadblock with a particular issue. For some reason, the ng-repeat directive isn't iterating through the users array as expected. The resulting list is just blank.
Below is a snippet of my code:
app.js
var app = angular.module('myapp', []);
app.controller('dataCtrl', function ($scope) {
$scope.users = [
{ name: 'Max', age: 20 },
{ name: 'Tom', age: 42 },
{ name: 'Alex', age: 41 },
{ name: 'Thomas', age: 3 },
{ name: 'Andreas', age: 17 },
{ name: 'Richard', age: 11 }
];
});
index.html
<!DOCTYPE html>
<html ng-app="myapp" lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>Angular JS</title>
</head>
<body>
<div class="container">
<h1>The Family</h1>
<table class="table" ng-controller="dataCtrl">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>