AngularJs: Creating a calender - angularjs

Question

I have this error when running the snippet below.
The code is actualy working, but there seem to be a problem.
angular.js:9037 Error: [$rootScope:infdig] http://errors.angularjs.org/undefined/$rootScope/infdig?p0=10&p1=%5B%5B%22f…5Ct%5C%5CtMi%5C%5Cn%20%20%20%20%5C%5Ct%5C%5Ct%5C%5Ct%5C%5Ct%5C%22%22%5D%5D
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
at g.$get.g.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:99:110)
at g.$get.g.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:101:12)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:415
at Object.d [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:30:328)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:323)
at Wb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:30)
at Oc (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:17:99)
at HTMLDocument.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:198:494)
MINERR_ASSET:22 Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/undefined/$rootScope/infdig?p0=10&p1=%5B%5B%22f…5Ct%5C%5CtMi%5C%5Cn%20%20%20%20%5C%5Ct%5C%5Ct%5C%5Ct%5C%5Ct%5C%22%22%5D%5D
Please run snippet below for further understanding.
I get this error because of the day names im looping trough. When deleting following:
this.firstDay++;
if (this.firstDay == 6) {
this.firstDay = 0;
}
There is no error, but Only Monday is displayed
(function() {
var app = angular.module('myApp', []);
app.controller('CalenderController', function() {
this.days = dayNames;
this.date = date;
this.firstDay = 0;
this.getDays = function(num) {
return new Array(num);
};
this.getDayName = function() {
this.firstDay++;
if (this.firstDay == 6) {
this.firstDay = 0;
}
return dayNames[this.firstDay];
};
});
//Variables
var dayNames = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
var date = {
'2015': [{
'month': 'Januar',
'day': 31
}, {
'month': 'Februar',
'day': 28
}, {
'month': 'März',
'day': 31
}, {
'month': 'April',
'day': 30
}, {
'month': 'Mai',
'day': 31
}, {
'month': 'Juni',
'day': 30
}, {
'month': 'Juli',
'day': 31
}, {
'month': 'August',
'day': 31
}, {
'month': 'September',
'day': 30
}, {
'month': 'Oktober',
'day': 31
}, {
'month': 'November',
'day': 30
}, {
'month': 'Dezember',
'day': 31
}]
};
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="CalenderController as calender">
<table ng-repeat="date in calender.date.2015" class="table table-striped table-bordered">
<thead>
<tr class="info">
<td colspan="{{date.day}}"> {{date.month}} </td>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="_ in calender.getDays(date.day) track by $index">
{{calender.getDayName()}}
</td>
</tr>
<tr>
<td ng-repeat="_ in calender.getDays(date.day) track by $index">
{{$index + 1 }}
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

Change this.firstDay to var firstDay i.e. javascript variable. The issue is while it is scope variable this.firstDay, angular internally place watch on it, and whenever any scope update occurs it run it digest cycle instantly, in you case this.firstDay is update exact 4015 times, that leads to an indefinite loop of digest cycle, and i don't think you are using this scope variable anywhere inside the controller. So better make it javascript var
Controller
app.controller('CalenderController', function(){
this.days = dayNames;
this.date = date;
var firstDay = 0;
this.getDays = function(num){
return new Array(num);
};
this.getDayName = function(){
firstDay++;
if(firstDay == 6){
firstDay = 0;
}
return dayNames[this.firstDay];
};
});
Working Plunkr
Hope this could help you. Thanks.