TypeError: Cannot read property 'clone' of undefined when changing event title

[masiri201]

The error happens when i change the text on the events array

Page angular controller

`'use strict';

function CalendarCtrl($scope, $compile, uiCalendarConfig) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    window.scope = $scope;
    $scope.changeTo = 'Hungarian';
    $scope.eventIndex = 1;
    /* event source that pulls from google.com */
    $scope.eventSource = {
        url: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
        className: 'gcal-event', // an option!
        currentTimezone: 'America/Chicago' // an option!
    };
    /* event source that contains custom events on the scope */
    $scope.events = [];
    /* event source that calls a function on every view switch */
    $scope.eventsF = function (start, end, timezone, callback) {
        var s = new Date(start).getTime() / 1000;
        var e = new Date(end).getTime() / 1000;
        var m = new Date(start).getMonth();
        var events = [{
            title: 'Feed Me ' + m,
            start: s + (50000),
            end: s + (100000),
            allDay: false,
            className: ['customFeed']
        }];
        callback(events);
    };
    /* event type defines the color and class of that event */
    $scope.eventTypes = [
        {
            type: 'Evento',
            listColor: 'primary',
            className: 'event-primary'
        },
        {
            type: 'Padrão',
            listColor: 'default',
            className: 'event-default'
        },
        {
            type: 'Reserva',
            listColor: 'warning',
            className: 'event-warning'
        },
        {
            type: 'Festividade',
            listColor: 'success',
            className: 'event-success'
        }];

    $scope.calEventsExt = {
        color: '#f00',
        textColor: 'yellow',
        events: [
            {
                type: 'party',
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                type: 'party',
                title: 'Lunch 2',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                type: 'party',
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    };
    /* alert on eventClick */
    $scope.alertOnEventClick = function (date, jsEvent, view) {
        $scope.alertMessage = (date.title + ' was clicked ');
    };
    /* alert on Drop */
    $scope.alertOnDrop = function (event, delta, revertFunc, jsEvent, ui, view) {
        $scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
    };
    /* alert on Resize */
    $scope.alertOnResize = function (event, delta, revertFunc, jsEvent, ui, view) {
        $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
    };
    /* add and removes an event source of choice */
    $scope.addRemoveEventSource = function (sources, source) {
        var canAdd = 0;
        angular.forEach(sources, function (value, key) {
            if (sources[key] === source) {
                sources.splice(key, 1);
                canAdd = 1;
            }
        });
        if (canAdd === 0) {
            sources.push(source);
        }
    };
    /* add custom event*/
    $scope.addEvent = function () {
        var eventType = $('#eventTypeText').val();
        var listColor = 'default';
        var className = 'event-default';

        //define o tipo de evento
        for (var i = 0; i < $scope.eventTypes.length; i++) {
            if (eventType == $scope.eventTypes[i].type) {
                listColor = $scope.eventTypes[i].listColor;
                className = $scope.eventTypes[i].className;
            }
        }

        $scope.events.push({
            id: $scope.eventIndex,
            title: 'Novo evento',
            start: new Date(y, m, d),
            end: new Date(y, m, d),
            className: [className],
            listColor: listColor,
        });
        $scope.eventIndex
        window.console.log($scope.events);
    };

    /* remove event */
    $scope.remove = function (index) {
        //remove o evento dos eventos
        $scope.events.splice(index, 1);
        $scope.eventIndex--;
        angular.element('#myCalendar').fullCalendar('removeEvents');
        angular.element('#myCalendar').fullCalendar('addEventSource', $scope.events);
    };
    /* Change View */
    $scope.changeView = function (view, calendar) {
        uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
    };
    /* Change View */
    $scope.renderCalender = function (calendar) {
        if (uiCalendarConfig.calendars[calendar]) {
            uiCalendarConfig.calendars[calendar].fullCalendar('render');
        }
    };
    /* Render Tooltip */
    $scope.eventRender = function (event, element, view) {
        element.attr({
            'tooltip': event.title,
            'tooltip-append-to-body': false
        });
        $compile(element)($scope);
    };
    /* config object */
    $scope.uiConfig = {

        calendar: {

            height: 550,
            editable: true,
            header: {
                left: 'title',
                right: 'month,agendaWeek,agendaDay today prev,next'
            },
            buttonIcons: {
                prev: ' fa fa-caret-left',
                next: ' fa fa-caret-right',
            },

            droppable: true, // this allows things to be dropped onto the calendar !!!
            axisFormat: 'h:mm',
            columnFormat: {
                month: 'ddd', // Mon
                week: 'ddd D', // Mon 7
                day: 'dddd M/d', // Monday 9/7
                agendaDay: 'dddd D'
            },
            allDaySlot: false,
            eventClick: $scope.alertOnEventClick,
            eventDrop: $scope.alertOnDrop,
            eventResize: $scope.alertOnResize,
            eventRender: $scope.eventRender,
        }
    };

    $scope.changeLang = function () {
        if ($scope.changeTo === 'English') {
            $scope.uiConfig.calendar.dayNames = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'];
            $scope.uiConfig.calendar.dayNamesShort = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
            $scope.changeTo = 'Portuguese';
        } else {
            $scope.uiConfig.calendar.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            $scope.uiConfig.calendar.dayNamesShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            $scope.changeTo = 'English';
        }
    };
    /* event sources array*/
    $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
    $scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
}

angular
    .module('urbanApp')
    .controller('CalendarCtrl', ['$scope', '$compile', 'uiCalendarConfig', CalendarCtrl]);
`

Html doc

<script>
    var scope;
    $(function() {

        $(".dropdown-menu").on('click', 'li a', function() {
            $("#eventTypeText").text($(this).text());
            $("#eventTypeText").val($(this).text());
        });

    });

</script>

<div class="row" ng-controller="CalendarCtrl">
    <div class="col-sm-3">
        <!-- Butão para adicionar o evento-->
        <button type="button" class="btn btn-default" data-ng-click="addEvent()">
          <span class="fa fa-paint-brush mr5"></span>
          <span>Adicionar</span>
        </button>
        <!-- /Butão para adicionar o evento-->
        <!-- DropDown para definir o tipo do evento -->
        <div class="btn-group dropDown" dropdown>
            <button id="eventTypeButton" type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
            <span id="eventTypeText">Padrão</span>
            <span class="caret"></span>
          </button>
            <ul class="dropdown-menu" role="menu">
                <li>
                    <a href="javascript:;">Reserva</a>
                </li>
                <li>
                    <a href="javascript:;">Evento</a>
                </li>
                <li>
                    <a href="javascript:;">Festividade</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="javascript:;">Padrão</a>
                </li>
            </ul>
        </div>
        <!-- /DropDown para definir o tipo do evento -->
        <hr>

        <ul class="external-events">
            <li ng-repeat="e in events">
                <div class="external-event event-{{e.listColor}}">
                    <input ng-model="e.title" class="form-control no-border no-bg pl0">
                    <small>{{e.start | date:"MMM dd"}} - {{e.end | date:"MMM dd"}}</small>
                    <a class="small ml5 remove" ng-click="remove($index)">Remove</a>
                </div>
            </li>
        </ul>

    </div>
    <div class="col-sm-9">
        <div class="calendar-viewer">
            <div ui-calendar="uiConfig.calendar" id="myCalendar" class="fullcalendar" calendar="myCalendar" ng-model="eventSources"></div>
        </div>
    </div>
</div>