title: Problems with loading events from rails generated JSON to FullCalendar by Angularjs
body: <p>I'm new to AngularJS, and I've been trying this for a while but really cant solve my problem.</p>
  
  <ol>
  <li><p>When I was using ui-calendar for Angular, it has the 
  <code>"TypeError: undefined is not a function"</code>
  problem, and the calendar wont even show up.</p>
  
  <p>I solved it by wrapping the scope.calendar to $(scope.calendar) in the calendar.js. 
  I saw other saying its because the dependency, but when the page is running I can find the js sources in the page like the following:    </p>
  
  <blockquote>
    <p><code>&lt;script src="/assets/angular.min.js?body=1"&gt;&lt;/script&gt;</code><br>
    <code>&lt;script src="/assets/fullcalendar.js?body=1"&gt;&lt;/script&gt;</code><br>
    <code>&lt;script src="/assets/calendar.js?body=1"&gt;&lt;/script&gt;</code><br>
    <code>&lt;script src="/assets/angular-resource.min.js?body=1"&gt;&lt;/script&gt;</code><br>
    So is this a problem of dependency or?</p>
  </blockquote></li>
  <li><p>The second problem I have is loading events from rails-generated json into my calendar.
  $scope.events are events I wrote in javescript, $scope.eventjson are events from json, and only the $scope.events are loading into the calendar
  I have this code in my rails controller: </p>
  
  <blockquote>
    <p><code>respond_to do |format|
       format.json { render :json =&gt; {:title=&gt; "event", :start =&gt; "2014-04-08 10:00:00" }.to_json }
     end</code> </p>
  </blockquote>
  
  <p>And this is my Angular Controller:</p>
  
  <blockquote>
    <p><code>controller('myCtrl', ['$log', '$scope','$q', '$resource', '$http'].concat(function($log, $scope, $q, $resource, $http){
         var date, d, m, y, Event;
         date = new Date();
         d = date.getDate();
         m = date.getMonth();
         y = date.getFullYear();
         Event = $resource("/calendar.json");
         $scope.eventjson = Event.get();
         $scope.eventjson.$promise.then(function(result){
         $scope.eventjson = result;
         });
    $scope.events = [
      {
        title: 'All Day Event',
        start: "2014-4-10 10:00:00",
        allDay: false
      }, {
        title: 'All Day Event',
        start: "2014-4-11 10:00:00",
        allDay: false
      }
    ];
    $scope.uiConfig = {
      calendar: {
        height: 350,
        editable: true,
        header: {
          left: 'month basicWeek basicDay agendaWeek agendaDay',
          center: 'title',
          right: 'today prev,next'
        },
        defaultView: 'agendaWeek',
        dayClick: $scope.dayClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventClick: $scope.eventClick,
        viewRender: $scope.renderView
      }
    };
    $scope.eventSources = [$scope.events] //this one works
    //$scope.eventSources = [$scope.events, $scope.eventjson]  //got Error: $interpolate:interr
    //$scope.eventSources = [$scope.eventjson] //this one shows nothing
    }));</code></p>
  </blockquote>
  
  <p>And my view:</p>
  
  <p><code>&lt;div ui-calendar="uiConfig.calendar" ng-model="eventSources"&gt;</code></p></li>
  </ol>
  
  <p>I personally think its related with angular's promise, but I think that shouldn't be because there is <code>$scope.watch</code> in the calendar.js which means it should be watching $scope.eventSources changes. But when using break points I can see $scope.eventsources are not loading value for <code>$scope.eventSources = [$scope.eventjson]</code>.</p>
  
  <p>I've been working on this for two days, really appreciate if someone can give some help.</p>