stats table befire directive was made angularjs

stats.html

<tr>
	<td
		class='pointer'
		ng-repeat='goal in main.goals'
		ng-click='loadCenter(goal)'>
		<div
			ng-class='{
				"grass-light": goal.progress >= 100,
				"aqua-light": goal.progress < 100
			}'
			class='module mbn module-square module-large'>
			<div class='module-content text-center'>
				<h2 class='mbn mtn'>
					{{ goal.record_count }}/{{ goal.value }}
				</h2>
				<h5 class='mbn mtn'>
					{{ goal.card.name }}
					<strong>{{ goal.recurrence }}</strong>
					<i
						title="Attached to any contact."
						ng-show='goal.attached == "contacts"'
						class='icon-group'></i>
					<i
						title="Attached to just this user."
						ng-show='goal.attached == "user"'
						class='icon-user'></i>
				</h5>
			</div>

			<div ng-switch on="goal.recurrence">
				<div ng-switch-when="daily">
					<table class='table-fixed text-center'>
						<tr>
							<td
								ng-repeat='(key, val) in main.weekDays'
								ng-class='{
									"cloud-light": goal.daily_progress[key] == undefined,
									"grass-light": goal.daily_progress[key] >= goal.value,
									"aqua-light": (key + 1) == main.day && goal.daily_progress[key] < goal.value,
									"lavender-light": (key + 1) > main.day,
									"bittersweet-light": (goal.daily_progress[key] < goal.value || !goal.daily_progress[key]) && (key + 1) < main.day
								}'>
								{{ val }}
							</td>
						</tr>
					</table>
				</div>

				<div ng-switch-when="weekly">
					<table class='table-fixed text-center'>
						<tr>
							<td
								ng-repeat='(key, val) in main.weekDays'
								ng-class='{
									"aqua-light": key >= goal.start_day && key <= goal.end_day && goal.daily_progress[key] < goal.value,
									"aqua-light": key >= goal.start_day && key <= goal.end_day && goal.daily_progress[key] >= goal.value,
									"cloud-light": key < goal.start_day || key > goal.end_day
								}'>
								{{ val }}
							</td>
						</tr>
					</table>
				</div>

				<div ng-switch-when="monthly">
					<table class='table-fixed text-center'>
						<tr>
							<td
								ng-repeat='(key, val) in main.firstMonths'
								ng-class='{
									"cloud-light": goal.monthly_progress[key] == undefined,
									"aqua-light": key == main.month,
									"lavender-light": key > main.month,
									"bittersweet-light": key < main.month && goal.monthly_progress[key] < goal.value && key != main.month,
									"grass-light": goal.monthly_progress[key] >= goal.value
								}'>
								{{ val }}
							</td>
						</tr>
						<tr>
							<td
								ng-repeat='(key, val) in main.secondMonths'
								ng-class='{
									"cloud-light": goal.monthly_progress[key + 6] == undefined,
									"aqua-light": (key + 6) == main.month && goal.monthly_progress[key + 6] < goal.value,
									"lavender-light": (key + 6) > main.month,
									"bittersweet-light": (key + 6) < main.month && goal.monthly_progress[key + 6] < goal.value && (key + 6) != main.month,
									"grass-light": goal.monthly_progress[key + 6] >= goal.value
								}'>
								{{ val }}
							</td>
						</tr>
					</table>
				</div>

				<div ng-switch-when="quarterly">
					<table class='table-fixed text-center'>
						<tr>
							<td
								ng-show='goal.quarterly_progress[key] >= 0'
								ng-repeat='(key, val) in main.quarters'
								ng-class='{
									"grass-light": goal.quarterly_progress[key] >= goal.value,
									"bittersweet-light": (goal.quarterly_progress[key + 1] < goal.value || ! goal.quarterly_progress[key + 1]) && (key + 1) < main.quarter,
									"aqua-light": (key + 1) == main.quarter && goal.quarterly_progress[key] < goal.value,
									"lavender-light": (key + 1) > main.quarter
								}'>
								{{ val }}
							</td>
						</tr>
					</table>
				</div>

				<div
					ng-switch-default
					class='progress progress-small progress-striped'>
					<div
						ng-class='{ "bar-success": goal.progress >= 100 }'
						class='bar'
						style='width: {{ goal.progress }}%'></div>
				</div>
			</div>
		</div>
	</td>
</tr>