angular-ui ui-calendar 2.2.6 & 0.9.0

http://stackoverflow.com/questions/28100852

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<title>Full Calendar Test</title>

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/0.9.0/angular-moment.min.js"></script>
<script src="//rawgit.com/angular-ui/ui-calendar/master/src/calendar.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
    
<body ng-app="app" ng-controller="MainCtrl">
    <div style="font-size: 32px; color: #fff; ">
        <span style="background-color: blue;" ng-click="selectCalTab(1)">Tab 1</span>
        <span style="background-color: green;" ng-click="selectCalTab(2)">Tab 2</span>
    </div
    <br>
    <div style="background-color: #999999" ng-if="calendarTab == 1">
        <div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>
    </div>
    <div style="background-color: #989898" ng-if="calendarTab == 2">
        Nothing to see in this tab
    </div>
    <br>
    You just Selected: {{selectedDate}}
    <br>
    <br>
    The Event Source Object looks like:<br>
    <br>
    {{calendarDate}}
</body>

JavaScript

var myApp = angular.module('app', ['ui.calendar', 'angularMoment']);

myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){

    $scope.calendarDate = [
		{
			events: [
				{
					title: 'From',
					start: '2015-01-31',
					allDay: true,
					rendering: 'background',
					backgroundColor: '#f26522',
				},
			],
		}
	];

    $scope.setCalDate = function(date, jsEvent, view) {
            var selectedDate = moment(date).format('YYYY-MM-DD');				    // set dateFrom based on user click on calendar
            $scope.calendarDate[0].events[0].start = selectedDate;				    // update Calendar event dateFrom
            $scope.selectedDate = $filter('date')(selectedDate, 'yyyy-MM-dd');;		// update $scope.dateFrom
                console.log('$scope.uiConfig', $scope.uiConfig);
                console.log('uiCalendarConfig', uiCalendarConfig);
	};
        
	$scope.uiConfig = {
		calendar : {
			editable : false,
        aspectRatio: 2,
			header : {
				left : 'title',
				center : '',
				right : 'month,agendaWeek,agendaDay'
			},
			dayClick : $scope.setCalDate,
			background: '#f26522',
		},
	};

    $scope.calendarTab = 1;

    $scope.selectCalTab = function(tab){		// function to set which calendar tab is shown in html via ng-if
		if(tab==1){
			$scope.calendarTab = 1;
		} else {
			$scope.calendarTab = 2;
		}
	};
});