This might be more than you want but have you tried angular-datatables before? If you set the source file to the roommates, you can then build seven columns each representing a day of the week. Since you set the source file to the roommates, it'll generate a row in the table for each roommate. As it generates the row, you can put together some code to find any chores that match up with the current roommate and day of the week. I realize this might be a little hard to follow so here's a bit of a code sample (after you follow the setup as shown on the Getting Started page):

$scope.dtOptions = DTOptionsBuilder.newOptions() .withSource('enter your roommate api call here') }); $scope.dtColumns = [ DTColumnBuilder.newColumn('Mon').withTitle('Mon').renderWith(function (data, type, full) { currentRoommate = full.name //write your code here that queries your join table for the roommate name and Monday //return result; }), DTColumnBuilder.newColumn('Tue').withTitle('Tue').renderWith(function (data, type, full) { currentRoommate = full.name //write your code here that queries your join table for the roommate name and Tuesday //return result; }), ...so on until the rest of the week

In your view, just drop this:

<table id="foobar" datatable="" dt-options="dtOptions" dt-columns="dtColumns"></table>

It's a little verbose so you could probably splinter the join table query into a service. Angular-datatables comes with a lot of options that you can find in the API section of the documents so you can adjust the functionality of the table as you want (disable sorting, etc.). Don't forget to inject the dependencies for DTOptionsBuilder and DTColumnBuilder.

Hope this puts you on the right track.