Source button breaks my widget's functionality

CKEDITOR.plugins.add( 'figure', {
    requires: 'widget',
    icons: 'figure',
    init: function( editor ) {

        editor.addCommand( 'figureDialog', new CKEDITOR.dialogCommand( 'figureDialog' ) );
        editor.ui.addButton( 'Figure', {
            label: 'Add figure',
            command: 'figureDialog',
            toolbar: 'insert'
        });

        CKEDITOR.dialog.add( 'figureDialog', this.path + 'dialogs/figure.js' );

        editor.widgets.add( 'figure', {

            button : 'Add figure',

            template:
                '<figure>' +
                '<img src="{imageSrc}" alt class="img-responsive">' +
                '<figcaption>{caption}</figcaption>' +
                '</figure>',

            defaults:{
                imageSrc:'',
                caption:''
            },

            parts: {
                image : 'img',
                caption : 'figcaption'
            },

            init: function () {

                this.setData('imageSrc',this.parts.image.getAttribute('src'));
                this.setData('caption',this.parts.caption.getText());

            },

            data:function() {

                this.parts.image.setAttribute('src', this.data.imageSrc);
                this.parts.caption.setText(this.data.caption);

            },

            dialog: 'figureDialog',

            upcast: function( element ) {
                return element.name == 'figure';
            }

        });
    }
});

CKEDITOR.dialog.add( 'figureDialog', function( editor ) {
    return {
        title: 'Figure Settings',
        minWidth: 400,
        minHeight: 140,
        contents: [
            {
                id: 'basic',
                label: 'Settings',
                elements: [
                    {
                        type: 'text',
                        id: 'image',
                        label: 'Image',
                        validate: CKEDITOR.dialog.validate.notEmpty( "Image cannot be empty" ),
                        setup: function(widget) {
                            this.setValue(widget.data.imageSrc);
                        },
                        commit: function( widget ) {
                            widget.setData( 'imageSrc', this.getValue() );
                        }
                    },
                    {
                        type: 'button',
                        hidden: true,
                        id: 'browse',
                        filebrowser:{
                            action:'Browse',
                            target: 'basic:image',
                            params:{
                                type:'Images'
                            }
                        },
                        label: editor.lang.common.browseServer
                    },
                    {
                        type: 'text',
                        id: 'caption',
                        label: 'Caption',
                        setup: function(widget) {
                            this.setValue(widget.data.caption);
                        },
                        commit: function( widget ) {
                            widget.setData( 'caption', this.getValue() );
                        }
                    }
                ]
            }
        ]
    };
});

I read the docs and tried to create a widget. It adds an image and a caption to the editor, basic stuff. Everything works fine except source button.

If I don't click source button in entire session, I can change the image countless times but if I look at the source and go back, I can't change the image anymore. It just keeps the last src even though the editor shows the correct image.