Load service data and show in fullCalendar used AngularJS and FullCalendar

when using the events array (comment) it shows my calendar normally.
the problem is at the moment of loading the data that the service gives me, it does not load it before executing the uiConfig.

in $ scope.events = $ scope.JSON; I am trying to load the data (JSON string) that I receive from the service.

<!DOCTYPE html>
<html lang="es" id="top">
<head>
    <link href="~/Content/assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Scripts/Calendar/fullcalendar.css" rel="stylesheet" />
    <link href="~/Scripts/Calendar/calendarDemo.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/Calendar/ui-bootstrap-tpls-0.9.0.js"></script>
    <script src="~/Scripts/Moment/moment.js"></script>
    <script src="~/Scripts/Calendar/fullcalendar.js"></script>
    <script src="~/Scripts/Calendar/gcal.js"></script>
    <script src="~/Scripts/Calendar/calendar.js"></script>
    <style>
    </style>
    <script>
        var app = angular.module('AppRODO', ['ui.calendar', 'ui.bootstrap']);
        app.controller('CtrlRODO', function ($scope, $http, $compile, $timeout, uiCalendarConfig) {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            $scope.events = [];

            $http.get('/QA/Read_Data').then(function (response) {
                for (var i = 0; i < response.data.length; i++) {
                    response.data[i]._id = i + 1;
                    response.data[i].start = new Date(parseInt(response.data[i].start.match(//Date(([-0-9]*))//)[1]));
                    response.data[i].end = new Date(parseInt(response.data[i].end.match(//Date(([-0-9]*))//)[1]));
                }
                $scope.JSON = response.data;

                $scope.events = $scope.JSON;
            });



            //          $scope.events = [
            //              { title: 'Solo un dia', start: new Date(y, m, 1), allDay: true, },
            //              { id: 999, title: 'Otra', start: new Date(y, m, d + 4, 16, 0), allDay: true },
            //              { title: 'Rango de dias', start: new Date(y, m, 6, 19, 0), end: new Date(y, m, 10, 22, 30), allDay: true },
            //          ];

            $scope.eventsExt = {
                color: '#f00',
                events: [
                    { type: 'party', title: 'Finaliza', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: true },
                    { type: 'party', title: 'Finaliza 2', start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: true },
                    { type: 'party', title: 'rodo', start: new Date(y, m, 28), end: new Date(y, m, 29), allDay: true }
                ]
            };

            $scope.Arque_Detail = function (date, jsEvent, view) {
                $scope.alertMessage = (date.title + ' was clicked ');
            };

            /* config object */
            $scope.uiConfig = {
                calendar: {
                    firstDay: 7,
                    height: 500,
                    lang: 'es',
                    editable: true,
                    header: {
                        left: 'title',
                        center: '',
                        right: 'today prev,next'
                    },
                    eventClick: $scope.Arque_Detail,
                }

            };

            /* event sources array*/
            $scope.eventSources = [$scope.events, $scope.eventsExt];



            /* add custom event*/
            $scope.addEvent = function () {
                $scope.events.push({
                    title: 'RODO',
                    start: new Date(y, m, d),
                    end: new Date(y, m, d),
                    className: ['openSesame'], allDay: true
                });
            };
            /* remove event */
            $scope.remove = function (index) {
                $scope.events.splice(index, 1);
            };
        });
    </script>
</head>

VIEW

<body ng-app="AppRODO" ng-controller="CtrlRODO" ng-cloak>
    <div class="row">
        <div class="col-md-6">
            <div class="btn-group calTools">
                <button type="button" class="btn btn-primary" ng-click="addEvent()"> Add Event </button>
            </div>
            <ul class="unstyled">
                <li ng-repeat="e in events | orderBy: 'start'">
                    <div class="alert alert-info">
                        <b> <input ng-model="e.title" /></b>
                        {{e.start | date:"dd/MM/yyyy"}} - {{e.end | date:"dd/MM/yyyy"}}
                        <input type="button" class="btn-danger form-control" value="quitar" ng-click="remove($index)" />
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-6">
            <div class="alert-success calAlert" ng-show="alertMessage != undefined && alertMessage != ''">
                <h4>{{alertMessage}}</h4>
            </div>
            <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
        </div>
    </div>
    <div class="row" style="font-size: 8pt">
        <div class="col-md-6">
            <pre> {{JSON | json}}</pre>
        </div>
        <div class="col-md-6">
            <pre> {{events | json}}</pre>
        </div>
    </div>
</body>
</html>

Source: New feed
Source Url Load service data and show in fullCalendar used AngularJS and FullCalendar