How to pass data from angular to jquery when the http request is ready

Question

I am newbie to angular and javascript, so I need an advice. I am trying to make dynamically changed timepicker. When user chooses the value in datepicker I want my app to change timepicker disabled value dynamically. But the issue is when I am sending angular request to the server, it passes to jquery as empty. How can I made angular to wait until request is done?

JAVA code

@Controller
@RequestMapping("/rest/clientTrainingTime")
public class ClientTrainingTimeResources {
@RequestMapping(value = "/init", method = RequestMethod.GET)
public @ResponseBody
List<String> init () {
    List<String> list = new ArrayList<String>();
    list.add("13:00");
    list.add("14:00");
    list.add("15:00");
    list.add("16:00");
    return list;
}
@RequestMapping(value = "/update", method = RequestMethod.GET)
public @ResponseBody
List<String> update () {
    List<String> list = new ArrayList<String>();
    list.add("17:00");
    list.add("18:00");
    list.add("19:00");
    list.add("21:00");
    return list;
}

}

HTML code

<form:input type="text" id="datepicker" path="workoutDate" cssClass="form-control"/>
<label>Time: </label>
<form:input type="text" id="timepicker" path="workoutTime" cssClass="form-control"/>

JQUERY code

$(document).ready(function () {
        var disabledTime = angular.element(document.querySelector('[ng-controller="clientTrainingTimeCtrl"]')).scope().disabledTime;
        console.log('js disabledTime.length = ' + disabledTime.length);
        for (var i=0; i<disabledTime.length; i++) {
            console.log('js disabledTime[' + i + '] ' + disabledTime[i]);
        }
        $('#timepicker').timepicker({
            'minTime': '10:00',
            'maxTime': '22:00',
            'showDuration': true,
            'timeFormat': 'H:i',
            'show2400': true,
            'step': 60,
            'disableTimeRanges' : disabledTime
        });
        $("#datepicker").datepicker({
            dateFormat: "dd-mm-yy",
            minDate: 0,
            onSelect: function(dateText) {
                var date = $("#datepicker").datepicker("getDate");
                var scope = angular.element(document.querySelector('[ng-controller="clientTrainingTimeCtrl"]')).scope();
                scope.updateData(date);
                var disabledTime = angular.element(document.querySelector('[ng-controller="clientTrainingTimeCtrl"]')).scope().disabledTime;
                console.log('js disabledTime.length = ' + disabledTime.length);
                for (var i=0; i<disabledTime.length; i++) {
                    console.log('js disabledTime[' + i + '] ' + disabledTime[i]);
                }
                $('#timepicker').timepicker('option', 'disableTimeRanges', disabledTime);
            }
        });
    });

ANGULAR code

var clientTrainingTimeApp = angular.module ("clientTrainingTimeApp", []);
clientTrainingTimeApp.controller("clientTrainingTimeCtrl", function ($scope, $http, Time) {

    $scope.disabledTime = [];
    $scope.init = function () {
       var timePromise = Time.getTime();
       timePromise.then(function(result) {
            var temp = result;
            $scope.disabledTime = createArray(temp);
           //In this part disabledTime.length = 2
           console.log('disabledTime.length = ' + $scope.disabledTime.length);
           for (var i=0; i<$scope.disabledTime.length; i++) {
               console.log('disabledTime[' + i + '] ' + $scope.disabledTime[i]);
           }
        });
        //In this part disabledTime.length = 0
        console.log('disabledTime.length = ' + $scope.disabledTime.length);
        for (var i=0; i<$scope.disabledTime.length; i++) {
            console.log('disabledTime[' + i + '] ' + $scope.disabledTime[i]);
        }
    };

    $scope.updateData = function (date) {
        //Implement later
    }
});
clientTrainingTimeApp.factory('Time', function($http) {
    function getTime() {
        return $http.get('/eGym/rest/clientTrainingTime/init')
            .then(function (result) {
                return result.data;
            });
    }
        return { getTime: getTime }
});

var createArray = function (temp) {
    var result = [];
    var indexOfResultArray = 0;
    for (var i=0; i < temp.length; indexOfResultArray++) {
        result[indexOfResultArray] = [];
        for(var j = 0; j < 2; j++, i++){
            result[indexOfResultArray][j] = temp[i];
        }
    }
    return result;
};

And output

[Log] disabledTime.length = 0 (controller.js, line 120)
[Log] js disabledTime.length = 0 (startTraining, line 113)
[Log] disabledTime.length = 2 (controller.js, line 114)
[Log] disabledTime[0] 13:00,14:00 (controller.js, line 116)
[Log] disabledTime[1] 15:00,16:00 (controller.js, line 116)

I have followed advices in the other topics but they don`t help me. As you can see the jquery part gets the disabledTime array earlier than the http get request in angular is finished. Maybe I have another way to do the same thing that I need. Thanks for attention.

Answer 1

I achieved the right result with the code below, using jquery code in angular:

var timePromise = Time.getTime();
       timePromise.then(function(result) {
            var temp = result;
            $scope.disabledTime = createArray(temp);
           $(function () {
               $('#timepicker').timepicker('option', 'disableTimeRanges', $scope.disabledTime);
           });
           console.log('disabledTime.length = ' + $scope.disabledTime.length);
           for (var i=0; i<$scope.disabledTime.length; i++) {
               console.log('disabledTime[' + i + '] ' + $scope.disabledTime[i]);
           }
        });