Using ng-repeat with table rows
If you'd like to leave your scope data the way it is (as an array), you could write a directive, and encapsulate all of the HTML generation there, hence:
<div ng-controller="MyCtrl">
<calendar></calendar>
</div>
myApp.directive('calendar', function() {
// Requires that scope contains a 'monthDays' array.
// Adds 'weeks' to scope.
return {
restrict: 'E',
replace: true,
template: '<table cellspacing="0" cellpadding="0">'
+ ...
+ '<th scope="col" title="Sunday">Sun</th></tr>'
+ '<tr ng-repeat="week in weeks">'
+ '<td ng-repeat="day in week">{{day}}</td>'
+ '</tr></tbody></table>',
link: function(scope) {
scope.weeks = [];
for (var i = 0; i < scope.monthDays.length; i++) {
if (i % 7 == 0) {
scope.weeks.push([]);
}
scope.weeks[scope.weeks.length-1].push(scope.monthDays[i]);
Fiddle: http://jsfiddle.net/mrajcok/dGpsr/
Make $scope.dates
an array of arrays with the days.
Each array inside of it is a row, and each day inside of the row's array is a day
See this updated JSFiddle http://jsfiddle.net/6aqtj/1/