$ scope.scheduler在AngularJS中未定义

我一直在使用AngularJS v1.4.1和DayPilot v8.1.17制作this tutorial。

它工作正常，但我有问题，当我想从外部服务器加载所有我的事件以json格式返回事件。

view.html

<div ng-controller="ViewSchedulerDPCtrl" > 
    <daypilot-scheduler id="scheduler" daypilot-config="schedulerConfig" daypilot-events="events" ></daypilot-scheduler> 
</div>

schedulerDP.js

'use strict'; 

    var app = angular.module('ModuleApp') 
    app.controller('ViewSchedulerDPCtrl', function($scope, $timeout, aircraftService,flightService) { 
     $scope.schedulerConfig = { 
      scale: "Hour", 
      days: 5, 
      startDate: new Date(), 
      timeHeaders: [ 
       { groupBy: "Month"}, 
       { groupBy: "Day", format: "d" }, 
       { groupBy: "Hour", format: "hh:mm" } 
      ] 
     }; 

     $timeout(function() { 
      loadResources(); 
      loadEvents($scope.scheduler.visibleStart(), $scope.scheduler.visibleEnd()); // this line doesn't work, scheduler got undefined 
     }); 

     var loadResources=function() { 

      aircraftService.getAllAircrafts().then(function(aircrafts){ 
      $scope.schedulerConfig.resources = aircrafts; 

      }); 
     } 

     function loadEvents(from, to) { 
      flightService.getFlights(from,to).then(function(flights){ 
      $scope.schedulerConfig.startDate = from; 
       $scope.schedulerConfig.days = Math.floor(new DayPilot.TimeSpan(to.getTime() - from.getTime()).totalDays()); 
       $scope.events = flights; 
      }); 
     } 
     });

调度正确地加载资源，但它并没有显示的事件，当我看到Chrome控制台登录它会显示错误：

enter image description here