title: AngularJS - ui.calendar TypeError: Cannot read property 'length' of undefined
body: <p>I am creating a calendar with full calendar which pulls the events from an external json file. I am getting the following error;</p>
  
  <pre><code>TypeError: Cannot read property 'length' of undefined
  at Object.changeWatcher.getTokens (calendar.js:98)
  at n.a.$get.n.$digest (angular.js:14300)
  at n.a.$get.n.$apply (angular.js:14571)
  at angular.js:1455
  at Object.e [as invoke] (angular.js:4203)
  at d (angular.js:1453)
  at uc (angular.js:1473)
  at Jd (angular.js:1367)
  at HTMLDocument.&lt;anonymous&gt; (angular.js:26304)
  at n.Callbacks.j (jquery.js:3099)
  </code></pre>
  
  <p>on my angularJS app.</p>
  
  <p>At the minute my event source looks like this;</p>
  
  <pre><code>[ [ { "title": "Public Holiday", "start": "2015-09-07", "allDay": true },
  { "title": "Public Holiday", "start": "2015-09-08", "allDay": true } ] ]
  </code></pre>
  
  <p>This I believe is true but as I am also able to run the .length function on it. However I am not too sure where I am going wrong, any help is greatly appreciated.</p>
  
  <p>controllers.js</p>
  
  <pre><code>var app = angular.module('app',['ui.calendar']);
  app.controller('mainController',function($scope,cacheFactory,$interval,holiday){
  holiday.allHolidays(function(data){
  
      var len = data.data.length;
      var friendArray = [];
  
      for(var i = 0; i &lt; len; i++){
  
          if(data.data[i].array_phasedescription1stline__tspending_jobandphase == 'Public Holiday'){
  
              friendArray.push({
                  title: data.data[i].array_phasedescription1stline__tspending_jobandphase,
                  start: data.data[i].tspending_timedate,
                  allDay: true
              });
          }
      }
      $scope.events = [friendArray];
  });
  
  $scope.calOptions = {
      editable: true,
      header: {
          left: 'prev',
          center: 'title',
          right: 'next'
      }
  }
  });
  </code></pre>
  
  <p>factories.js</p>
  
  <pre><code>app.factory('holiday',function($http){
  return {
     allHolidays: function(callback){
         $http.get('schedule.json').success(callback);
     }
  </code></pre>
  
  <p>}
      });</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;body ng-app="app"&gt;
  &lt;div ng-controller="mainController"&gt;
      &lt;div class="calendar" ui-calendar="calOptions" ng-model="events"&gt;&lt;/div&gt;
      {{ events | json}}
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>