Why isn't ng-repeat working here? - angularjs

Question

I have an array within my scope called checkedInChildren. The array contains just string values. I want a table to repeat for each string in the checkedInChildren array. Here is what I have so far:
<div ng-app="MyApp" ng-controller="myCtrl">
<div>
<table>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="child in checkedInChildren">
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
Here is my controller:
app.controller("myCtrl", function($scope, $http) {
$scope.checkedInChildren = [];
$scope.addChildToCheckedIn = function(childName) {
$scope.checkedInChildren.push(childName);
}
});
No rows show no matter what names I add to that array. I omitted some code in the controller and some of the HTML, but I am debugging and clearly seeing values in the array. Any ideas?

Answer 1

You have to add {{child}} to bind each item to the view.
<tr ng-repeat="child in checkedInChildren">
<td>
{{child}}
</td>
</tr>

Answer 2

on your HTML you're referencing a different controller, put the proper name
<div ng-app="MyApp" ng-controller="checkInCtrl">...</div>
Demo

Answer 3

Working Plnkr
It is not displaying test because there is no item in your checkedInChildren array.
From Angular Doc:
The ngRepeat directive instantiates a template once per item from a
collection.
$scope.checkedInChildren = [];
$scope.addChildToCheckedIn = function (childName) {
$scope.checkedInChildren.push(childName);
}
$scope.addChildToCheckedIn('John');
You did not call addChildToCheckedIn method, that is why checkedInChildren array is empty.
hope that solve your problem.

Answer 4

Did you call the addChildToCheckedIn function? Try this. Hope this helps.