diff --git a/webadmin/src/views/settings.html b/webadmin/src/views/settings.html
index ec5c4d22e..17cce00ea 100644
--- a/webadmin/src/views/settings.html
+++ b/webadmin/src/views/settings.html
@@ -14,12 +14,12 @@
 
                 <div class="grid">
                     <div class="item" ng-repeat="avatar in avatarChange.availableAvatars" style="background-image: url('{{avatar.data || avatar.url}}');" ng-click="setPreviewAvatar(avatar)"></div>
-                    <div class="item add" ng-click="showCustomAvatarSelector()"></div>
+                    <div class="item add" ng-click="avatarChange.showCustomAvatarSelector()"></div>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" ng-click="doChangeAvatar()" ng-disabled="avatarChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="avatarChange.busy"></i> Change</button>
+                <button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="avatarChange.busy"></i> Change</button>
             </div>
         </div>
     </div>
@@ -66,7 +66,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" ng-click="doCreateBackup()" ng-disabled="createBackup.busy"><i class="fa fa-spinner fa-pulse" ng-show="developerModeChange.busy"></i> Confirm</button>
+                <button type="button" class="btn btn-success" ng-click="createBackup.doCreateBackup()" ng-disabled="createBackup.busy"><i class="fa fa-spinner fa-pulse" ng-show="developerModeChange.busy"></i> Confirm</button>
             </div>
         </div>
     </div>
@@ -88,7 +88,7 @@
                 <br/>
                 <br/>
                 <br/>
-                <form name="planChangeForm" role="form" novalidate ng-submit="doChangePlan(planChangeForm)" autocomplete="off">
+                <form name="planChangeForm" role="form" novalidate ng-submit="planChange.doChangePlan(planChangeForm)" autocomplete="off">
                     <fieldset>
                         <input type="password" style="display: none;">
                         <div class="form-group" ng-class="{ 'has-error': (!planChangeForm.password.$dirty && planChange.error.password) || (planChangeForm.password.$dirty && planChangeForm.password.$invalid) }">
@@ -105,7 +105,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-success" ng-click="doChangePlan()" ng-disabled="planChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="planChange.busy"></i> Confirm</button>
+                <button type="button" class="btn btn-success" ng-click="planChange.doChangePlan()" ng-disabled="planChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="planChange.busy"></i> Confirm</button>
             </div>
         </div>
     </div>
@@ -128,7 +128,7 @@
 <div class="card" style="margin-bottom: 15px;">
     <div class="row">
         <div class="col-xs-4" style="min-width: 150px;">
-            <div class="settings-avatar" ng-click="showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
+            <div class="settings-avatar" ng-click="avatarChange.showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
                 <div class="overlay"></div>
             </div>
         </div>
@@ -186,7 +186,7 @@
 
     <div class="row">
         <div class="col-xs-12">
-            <button class="btn btn-primary pull-right" ng-disabled="planChange.requestedPlan.name === currentPlan.name" ng-click="showChangePlan()">Change Plan</button>
+            <button class="btn btn-primary pull-right" ng-disabled="planChange.requestedPlan.name === currentPlan.name" ng-click="planChange.showChangePlan()">Change Plan</button>
         </div>
     </div>
 </div>
@@ -265,7 +265,7 @@
             </div>
         </div>
         <div class="col-xs-3 text-right">
-            <button class="btn btn-outline btn-primary" ng-click="showCreateBackup()" ng-disabled="createBackup.busy">Backup now</button>
+            <button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy">Backup now</button>
         </div>
     </div>
 </div>
diff --git a/webadmin/src/views/settings.js b/webadmin/src/views/settings.js
index 9756aab08..af31fcd4d 100644
--- a/webadmin/src/views/settings.js
+++ b/webadmin/src/views/settings.js
@@ -26,12 +26,94 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         busy: false,
         error: {},
         password: '',
-        requestedPlan: null
+        requestedPlan: null,
+
+        showChangePlan: function () {
+            $('#planChangeModal').modal('show');
+        },
+
+        planChangeReset: function () {
+            $scope.planChange.error.password = null;
+            $scope.planChange.password = '';
+
+            $scope.planChangeForm.$setPristine();
+            $scope.planChangeForm.$setUntouched();
+        },
+
+        doChangePlan: function () {
+            $scope.planChange.busy = true;
+
+            var options = {
+                size: $scope.planChange.requestedPlan.slug,
+                name: $scope.planChange.requestedPlan.name,
+                price: $scope.planChange.requestedPlan.price,
+                region: $scope.currentRegionSlug
+            };
+
+            Client.migrate(options, $scope.planChange.password, function (error) {
+                $scope.planChange.busy = false;
+
+                if (error) {
+                    if (error.statusCode === 403) {
+                        $scope.planChange.error.password = true;
+                        $scope.planChange.password = '';
+                        $scope.planChangeForm.password.$setPristine();
+                        $('#inputPlanChangePassword').focus();
+                    } else {
+                        console.error('Unable to change plan.', error);
+                    }
+                } else {
+                    $scope.planChange.planChangeReset();
+
+                    $('#planChangeModal').modal('hide');
+
+                    window.location.href = '/update.html';
+                }
+
+                $scope.planChange.busy = false;
+            });
+        }
     };
 
     $scope.createBackup = {
         busy: false,
-        percent: 100
+        percent: 100,
+
+        doCreateBackup: function () {
+            $('#createBackupModal').modal('hide');
+            $scope.createBackup.busy = true;
+            $scope.createBackup.percent = 100;
+
+            Client.backup(function (error) {
+                if (error) {
+                    console.error(error);
+                    $scope.createBackup.busy = false;
+                }
+
+                function checkIfDone() {
+                    Client.progress(function (error, data) {
+                        if (error) return window.setTimeout(checkIfDone, 250);
+
+                        // check if we are done
+                        if (!data.backup || data.backup.percent >= 100) {
+                            if (data.backup && data.backup.message) console.error('Backup message: ' + data.backup.message); // backup error message
+                            fetchBackups();
+                            $scope.createBackup.busy = false;
+                            return;
+                        }
+
+                        $scope.createBackup.percent = data.backup.percent;
+                        window.setTimeout(checkIfDone, 250);
+                    });
+                }
+
+                checkIfDone();
+            });
+        },
+
+        showCreateBackup: function () {
+            $('#createBackupModal').modal('show');
+        }
     };
 
     $scope.avatarChange = {
@@ -90,22 +172,82 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
             file: null,
             data: null,
             url: '/img/avatars/jar.png'
-        }]
-    };
+        }],
 
-    $scope.setPreviewAvatar = function (avatar) {
-        $scope.avatarChange.avatar = avatar;
-    };
+        getBlobFromImg: function (img, callback) {
+            var size = 256;
 
-    $scope.showCustomAvatarSelector = function () {
-        $('#avatarFileInput').click();
-    };
+            var canvas = document.createElement('canvas');
+            canvas.width = size;
+            canvas.height = size;
 
-    function avatarChangeReset() {
-        $scope.avatarChange.error.avatar = null;
-        $scope.avatarChange.avatar = null;
-        $scope.avatarChange.busy = false;
-    }
+            var imageDimensionRatio = img.width / img.height;
+            var canvasDimensionRatio = canvas.width / canvas.height;
+            var renderableHeight, renderableWidth, xStart, yStart;
+
+            if (imageDimensionRatio > canvasDimensionRatio) {
+                renderableHeight = canvas.height;
+                renderableWidth = img.width * (renderableHeight / img.height);
+                xStart = (canvas.width - renderableWidth) / 2;
+                yStart = 0;
+            } else if (imageDimensionRatio < canvasDimensionRatio) {
+                renderableWidth = canvas.width;
+                renderableHeight = img.height * (renderableWidth / img.width);
+                xStart = 0;
+                yStart = (canvas.height - renderableHeight) / 2;
+            } else {
+                renderableHeight = canvas.height;
+                renderableWidth = canvas.width;
+                xStart = 0;
+                yStart = 0;
+            }
+
+            var ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, xStart, yStart, renderableWidth, renderableHeight);
+
+            canvas.toBlob(callback);
+        },
+
+        doChangeAvatar: function () {
+            $scope.avatarChange.error.avatar = null;
+            $scope.avatarChange.busy = true;
+
+            var img = document.getElementById('previewAvatar');
+            $scope.avatarChange.avatar.file = $scope.avatarChange.getBlobFromImg(img, function (blob) {
+                Client.changeCloudronAvatar(blob, function (error) {
+                    if (error) {
+                        console.error('Unable to change cloudron avatar.', error);
+                    } else {
+                        Client.resetAvatar();
+                    }
+
+                    $('#avatarChangeModal').modal('hide');
+                    $scope.avatarChange.avatarChangeReset();
+                });
+            });
+        },
+
+        setPreviewAvatar: function (avatar) {
+            $scope.avatarChange.avatar = avatar;
+        },
+
+        avatarChangeReset: function () {
+            $scope.avatarChange.error.avatar = null;
+            $scope.avatarChange.avatar = null;
+            $scope.avatarChange.busy = false;
+        },
+
+        showChangeAvatar: function () {
+            $scope.avatarChange.avatarChangeReset();
+            $('#avatarChangeModal').modal('show');
+        },
+
+        showCustomAvatarSelector: function () {
+            $('#avatarFileInput').click();
+        }
+
+    };
 
     function fetchBackups() {
         Client.getBackups(function (error, backups) {
@@ -174,147 +316,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         });
     }
 
-    $scope.showChangePlan = function () {
-        $('#planChangeModal').modal('show');
-    };
-
-    function planChangeReset() {
-        $scope.planChange.error.password = null;
-        $scope.planChange.password = '';
-
-        $scope.planChangeForm.$setPristine();
-        $scope.planChangeForm.$setUntouched();
-    }
-
-    $scope.doChangePlan = function () {
-        $scope.planChange.busy = true;
-
-        var options = {
-            size: $scope.planChange.requestedPlan.slug,
-            name: $scope.planChange.requestedPlan.name,
-            price: $scope.planChange.requestedPlan.price,
-            region: $scope.currentRegionSlug
-        };
-
-        Client.migrate(options, $scope.planChange.password, function (error) {
-            $scope.planChange.busy = false;
-
-            if (error) {
-                if (error.statusCode === 403) {
-                    $scope.planChange.error.password = true;
-                    $scope.planChange.password = '';
-                    $scope.planChangeForm.password.$setPristine();
-                    $('#inputPlanChangePassword').focus();
-                } else {
-                    console.error('Unable to change plan.', error);
-                }
-            } else {
-                planChangeReset();
-
-                $('#planChangeModal').modal('hide');
-
-                window.location.href = '/update.html';
-            }
-
-            $scope.planChange.busy = false;
-        });
-    };
-
-    function getBlobFromImg(img, callback) {
-        var size = 256;
-
-        var canvas = document.createElement('canvas');
-        canvas.width = size;
-        canvas.height = size;
-
-        var imageDimensionRatio = img.width / img.height;
-        var canvasDimensionRatio = canvas.width / canvas.height;
-        var renderableHeight, renderableWidth, xStart, yStart;
-
-        if (imageDimensionRatio > canvasDimensionRatio) {
-            renderableHeight = canvas.height;
-            renderableWidth = img.width * (renderableHeight / img.height);
-            xStart = (canvas.width - renderableWidth) / 2;
-            yStart = 0;
-        } else if (imageDimensionRatio < canvasDimensionRatio) {
-            renderableWidth = canvas.width;
-            renderableHeight = img.height * (renderableWidth / img.width);
-            xStart = 0;
-            yStart = (canvas.height - renderableHeight) / 2;
-        } else {
-            renderableHeight = canvas.height;
-            renderableWidth = canvas.width;
-            xStart = 0;
-            yStart = 0;
-        }
-
-        var ctx = canvas.getContext('2d');
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(img, xStart, yStart, renderableWidth, renderableHeight);
-
-        canvas.toBlob(callback);
-    }
-
-    $scope.doChangeAvatar = function () {
-        $scope.avatarChange.error.avatar = null;
-        $scope.avatarChange.busy = true;
-
-        var img = document.getElementById('previewAvatar');
-        $scope.avatarChange.avatar.file = getBlobFromImg(img, function (blob) {
-            Client.changeCloudronAvatar(blob, function (error) {
-                if (error) {
-                    console.error('Unable to change cloudron avatar.', error);
-                } else {
-                    Client.resetAvatar();
-                }
-
-                $('#avatarChangeModal').modal('hide');
-                avatarChangeReset();
-            });
-        });
-    };
-
-    $scope.doCreateBackup = function () {
-        $('#createBackupModal').modal('hide');
-        $scope.createBackup.busy = true;
-        $scope.createBackup.percent = 100;
-
-        Client.backup(function (error) {
-            if (error) {
-                console.error(error);
-                $scope.createBackup.busy = false;
-            }
-
-            function checkIfDone() {
-                Client.progress(function (error, data) {
-                    if (error) return window.setTimeout(checkIfDone, 250);
-
-                    // check if we are done
-                    if (!data.backup || data.backup.percent >= 100) {
-                        if (data.backup && data.backup.message) console.error('Backup message: ' + data.backup.message); // backup error message
-                        fetchBackups();
-                        $scope.createBackup.busy = false;
-                        return;
-                    }
-
-                    $scope.createBackup.percent = data.backup.percent;
-                    window.setTimeout(checkIfDone, 250);
-                });
-            }
-
-            checkIfDone();
-        });
-    };
-
-    $scope.showCreateBackup = function () {
-        $('#createBackupModal').modal('show');
-    };
-
-    $scope.showChangeAvatar = function () {
-        avatarChangeReset();
-        $('#avatarChangeModal').modal('show');
-    };
-
     $('#avatarFileInput').get(0).onchange = function (event) {
         var fr = new FileReader();
         fr.onload = function () {
@@ -326,7 +327,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
                 };
 
                 $scope.avatarChange.availableAvatars.push(tmp);
-                $scope.setPreviewAvatar(tmp);
+                $scope.avatarChange.setPreviewAvatar(tmp);
             });
         };
         fr.readAsDataURL(event.target.files[0]);