colouring of ui bootstrap calendar(datepicker) giving problems after ajax call - angularjs

Question

html code:
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
.appointment>button {
color: black;
background-color: red;
}
.holidays>button {
color: black;
background-color: green;
}
</style>
<div>
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div style="display:inline-block; min-height:290px;">
<uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions" ng-change="dateSelected()" date-disabled="enableRequired(date, mode)" custom-class="dayClass(date, mode);"></uib-datepicker>
angularjs colour working code:
$scope.today = function() {
console.log($rootScope.dt);
var newdate = new Date($rootScope.dt);
newdate.getDate();
newdate.getMonth()+1;
newdate.getFullYear();
d=newdate.getFullYear()+"-"+(newdate.getMonth()+1)+"-"+newdate.getDate();
console.log("after cj\hnage"+d);
holidays = new Array();
var promise = servicePOST.send(appConstants.BASE_MS_URL + 'Dcrs/activityDay.php',{
"date":d
}).then(function(result) {
$scope.dcrlocked = result.dcrlocked;
$scope.leaves = result.leaves;
console.log(result.holidays);
//$scope.holidays = result.holidays;
for(i=0;i<result.holidays.length;i++)
{
holidays.push(new Date(result.holidays[i].date.replace(/-/g,',')));
}
alert(holidays.length);
return result.holidays;
});
/*promise.then(function(result) {
alert("holiday length after service post"+holidays.length);
$scope.dayClass= function(date, mode) {
if (mode === 'day') {
var dateToCheck = new Date(date);
for(var i = 0; i < holidays.length ; i++) {
if(areDatesEqual(holidays[i], dateToCheck)){
return 'appointment';
}
}
}
return '';
};
}); */
$rootScope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$rootScope.dt = null;
};
$scope.inlineOptions = {
minDate: new Date(),
showWeeks: false
};
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabledasda(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.setDate = function(year, month, day) {
$rootScope.dt = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.enableRequired = function(date, mode){
$scope.holidaysdateshardcoded = [
new Date(2016,04,03),
new Date(2016,04,08),
//new Date(2016,2,16),
new Date()
]
var isHoliday = true;
for(var i = 0; i < $scope.holidaysdateshardcoded.length ; i++) {
if(areDatesEqual($scope.holidaysdateshardcoded[i], date)){
isHoliday = false;
}
}
return ( mode === 'day' && isHoliday );
};
function areDatesEqual(date1, date2) {
return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)
}
$scope.dayClass = function(date, mode) {
var appointments = [
new Date(2016,04,03),
new Date(2016,04,08),
new Date(),
]
if (mode === 'day') {
var dateToCheck = new Date(date);
for(var i = 0; i < appointments.length ; i++) {
if(areDatesEqual(appointments[i], dateToCheck)){
return 'appointment';
}
}
}
return '';
};
$scope.dateSelected = function(){
var appointments = [
new Date(2016,04,03),
new Date(2016,04,08),
new Date(),
];
var dateSelected = new Date($rootScope.dt);
for(var i = 0; i < appointments.length ; i++) {
if(areDatesEqual(appointments[i], dateSelected)){
performAction();
}
}
};
function performAction(){
location.href='#/data';
}
with the above angularJS code, the dates get coloured but next when i fetch an array from the database and use promise to wait till data come and than apply the colour using dayclass as in the following angularJS code, it does not work (no colour gets applied to the particular dates coming in holidays array). the data comes properly and i manipulate it to the format required and passs the dates from the holidays arry. but it does'nt work.
angularJS code that does not work:
$scope.today = function() {
console.log($rootScope.dt);
var newdate = new Date($rootScope.dt);
newdate.getDate();
newdate.getMonth()+1;
newdate.getFullYear();
d=newdate.getFullYear()+"-"+(newdate.getMonth()+1)+"-"+newdate.getDate();
console.log("after cj\hnage"+d);
holidays = new Array();
var promise = servicePOST.send(appConstants.BASE_MS_URL + 'Dcrs/activityDay.php',{
"date":d
}).then(function(result) {
$scope.dcrlocked = result.dcrlocked;
$scope.leaves = result.leaves;
console.log(result.holidays);
//$scope.holidays = result.holidays;
for(i=0;i<result.holidays.length;i++)
{
holidays.push(new Date(result.holidays[i].date.replace(/-/g,',')));
}
alert(holidays.length);
return result.holidays;
});
promise.then(function(result) {
alert("holiday length after service post"+holidays.length);
$scope.dayClass = function(date, mode) {
if (mode === 'day') {
var dateToCheck = new Date(date);
for(var i = 0; i < holidays.length ; i++) {
if(areDatesEqual(holidays[i], dateToCheck)){
return 'appointment';
}
}
}
return '';
};
});
$rootScope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$rootScope.dt = null;
};
$scope.inlineOptions = {
minDate: new Date(),
showWeeks: false
};
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabledasda(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.setDate = function(year, month, day) {
$rootScope.dt = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.enableRequired = function(date, mode){
$scope.holidaysdateshardcoded = [
new Date(2016,04,03),
new Date(2016,04,08),
//new Date(2016,2,16),
new Date()
]
var isHoliday = true;
for(var i = 0; i < $scope.holidaysdateshardcoded.length ; i++) {
if(areDatesEqual($scope.holidaysdateshardcoded[i], date)){
isHoliday = false;
}
}
return ( mode === 'day' && isHoliday );
};
function areDatesEqual(date1, date2) {
return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)
}
$scope.dateSelected = function(){
var appointments = [
new Date(2016,04,03),
new Date(2016,04,08),
new Date(),
];
var dateSelected = new Date($rootScope.dt);
for(var i = 0; i < appointments.length ; i++) {
if(areDatesEqual(appointments[i], dateSelected)){
performAction();
}
}
};
function performAction(){
location.href='#/data';
}
any help would be appreciated! please ask if confused!