ng-repeat errors. Can't read property of undefined - angularjs

Question

I have two errors saying: Cannot read property 'active' of undefined and Cannot read property 'boss' of undefined while I'm trying to use ng-repeat over my array of users.
In the controller I'm using the following code:
$scope.users = [
{
id: 1,
name: 'John',
birthday: '06.07.2008',
city: 'Budapest',
active: false,
boss: false
},
{
id: 2,
name: 'Mary',
birthday: '01.02.2003',
city: 'Berlin',
active: false,
boss: true
},
{
id: 3,
name: 'James',
birthday: '04.05.2006',
city: 'Vienna',
active: false,
boss: false
}
];
$scope.isActive = function (id) {
return $scope.users[id].active;
}
$scope.isBoss = function (id) {
console.log($scope.users[id]);
return $scope.users[id].boss;
}
In the view I have following code:
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Birthday</th>
<th>City</th>
<th>Active</th>
<th>Boss</th>
</tr>
</thead>
<tbody>
<div>
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.birthday}}</td>
<td>{{user.city}}</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }">
</td>
</tr>
</div>
</tbody>
At the end it prints the table in the right way but also throws those errors. Did I miss something?
Also here's rendered result:
<tbody>
<!-- ngRepeat: user in users -->
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
<td class="ng-binding">1</td>
<td class="ng-binding">John</td>
<td class="ng-binding">06.07.2008</td>
<td class="ng-binding">Budapest</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }" checked="checked">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }" checked="checked">
</td>
</tr>
<!-- end ngRepeat: user in users -->
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
<td class="ng-binding">2</td>
<td class="ng-binding">Mary</td>
<td class="ng-binding">01.02.2003</td>
<td class="ng-binding">Berlin</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }" checked="checked">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }" checked="checked">
</td>
</tr>
<!-- end ngRepeat: user in users -->
<tr ng-click="goToProfile(user.id)" ng-repeat="user in users" class="ng-scope">
<td class="ng-binding">3</td>
<td class="ng-binding">James</td>
<td class="ng-binding">04.05.2006</td>
<td class="ng-binding">Vienna</td>
<td>
<input type="checkbox" name="active" ng-checked="{ checked: isActive(user.id) }">
</td>
<td>
<input type="radio" name="boss" ng-checked="{ checked: isBoss(user.id) }">
</td>
</tr>
<!-- end ngRepeat: user in users -->
</tbody>

Answer 1

That's because your isActive and isBoss functions are being passed user.id. I observed your user.id starts from id 1, meanwhile in these functions, you're trying to access the $scope.users using the indexes passed in. What happens is that, for example, a user.id of 3 in your isActive function would try to access $scope.users[3].active. However, there's actually no index 3 (representing the fourth item in the $scope.users array, which is undefined)
Change your ..isActive(user.id) to ...isActive($index) and your ...isBoss(user.id) to ...isBoss($index)