directive model doesnt work via http angularjs

Question

I'm having a problem with regards to data from http request to provide data to the directive model which is powered by fullcalendar(calendar.js)

First here are my codes.

HTML

<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>

CONTROLLER

myApp.controller('ScheduleController', ['$scope', '$http', '$compile', 'uiCalendarConfig', function ($scope, $http, $compile, uiCalendarConfig) {

$scope.uiConfig = {
    calendar: {
        droppable: true,
        selectable: true,
        selectHelper: true,
        editable: true,
        height: 'auto',
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },
    }
}

$scope.getRequestStatus = function(){
    return $http({
        method : "GET",
        url : "myUrl"
    }).then(function success(response) {

        var request_details = [];
        for(var i = 0; i < response.data.length; i++){
            request_details[i] = {};
            request_details[i].id       = response.data[i]['request_id'];
            request_details[i].title    = response.data[i]['request_id'];
            request_details[i].start    = new Date(response.data[i]['start']);
            request_details[i].end      = new Date(response.data[i]['end']);
        }

        return request_details;
    }, function error(response) {
        return response.statusText;
    });
}


$scope.getRequestStatus().then(function(requestStatus){
    $scope.eventSources = [$scope.events];
})
}

NOTE THIS: i can get the data but it doesnt show from the calendar.

$scope.getRequestStatus().then(function(requestStatus){
    $scope.eventSources = [$scope.events];
})

However when I do the events manually like the example below it works.

$scope.events = [
    {title: 'All Day Event',start: new Date()},
];

$scope.eventSources = [$scope.events];

both data from http and manual are equal.

I also tried delaying the request using $timeout but the item doesn't show

Answer 1

I already fixed this for anyone who will encounter this. just put boolean parent on your directive html then show it if the data when its ready. see example below:

TEMPLATE

<div ng-if="ready">
    <div ui-calendar="uiConfig.calendar" ng-model="eventSource"></div>
</div>

CONTROLLER

    $scope.getDieStatus = function(){
        $http({
            method : "GET",
            url : "url",
        }).then(function success(response) {
            $scope.eventSource = [response.data];
            $scope.ready = true;
        }, function error(response) {
            return response.statusText;
        });
    }

Answer 2

Try by Changing:

$scope.getRequestStatus = function(){ return $http({ method : "GET", url : "myUrl" }).then(function success(response) {

        var request_details = [];
        for(var i = 0; i < response.data.length; i++){
            request_details[i] = {};
            request_details[i].id       = response.data[i]['request_id'];
            request_details[i].title    = response.data[i]['request_id'];
            request_details[i].start    = new Date(response.data[i]['start']);
            request_details[i].end      = new Date(response.data[i]['end']);
        }

        return request_details;
    }, function error(response) {
        return response.statusText;
    });
}

to

var getRequestStatus = function(){
    return $http({
        method : "GET",
        url : "myUrl"
    }).then(function success(response) {

        var request_details = [];
        for(var i = 0; i < response.data.length; i++){
            details = {};
            details.id       = response.data[i]['request_id'];
            details.title    = response.data[i]['request_id'];
            details.start    = new Date(response.data[i]['start']);
            details.end      = new Date(response.data[i]['end']);
            request_details.push(details);
        }

        return request_details;
    }, function error(response) {
        return response.statusText;
    });
}