JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://diarytalk.me/requirements/fullcalendar/fullcalendar.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.js"></script>
<div ng-app="webApp">
    <div ng-controller="Ctrl">
        {{moo}}
        <button ng-click="setView(1);">view 1</button>
        <button ng-click="setView(2);">view 2</button>
        <hr/>
        <div ng-show="currentView.viewId==1">view 1</div>
        <div ng-show="currentView.viewId==2">
            view 2
            <div id="calendar-me"></div>
        </div>
    </div>
</div>

JavaScript

var webApp = angular.module("webApp", []);

webApp.controller("Ctrl", function($scope){
    $scope.moo = "Moo";
    var view1 = {viewId: 1};
    var view2 = {viewId: 2};
    var views = [view1, view2];
    
    var applyCalendar = function() {
        // DOES NOT work properly
        $("#calendar-me").fullCalendar();
        
        // works, but haaacky!
        
        /* setTimeout(function(){
            $("#calendar-me").fullCalendar();
        }, 200); */
        
    };
    
    $scope.currentView = view1;
    
    $scope.setView = function(id) {
        views.map(function(v){
            if(v.viewId == id) {
                $scope.currentView = v;
                if (id == 2) applyCalendar();
            }
        });
    };
});