Problems with loading events from rails generated JSON to FullCalendar by Angularjs - ruby-on-rails

Question

I'm new to AngularJS, and I've been trying this for a while but really cant solve my problem.
When I was using ui-calendar for Angular, it has the
"TypeError: undefined is not a function"
problem, and the calendar wont even show up.
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:
<script src="/assets/angular.min.js?body=1"></script>
<script src="/assets/fullcalendar.js?body=1"></script>
<script src="/assets/calendar.js?body=1"></script>
<script src="/assets/angular-resource.min.js?body=1"></script>
So is this a problem of dependency or?
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:
respond_to do |format|
format.json { render :json => {:title=> "event", :start => "2014-04-08 10:00:00" }.to_json }
end
And this is my Angular Controller:
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
}));
And my view:
<div ui-calendar="uiConfig.calendar" ng-model="eventSources">
I personally think its related with angular's promise, but I think that shouldn't be because there is $scope.watch 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 $scope.eventSources = [$scope.eventjson].
I've been working on this for two days, really appreciate if someone can give some help.