Angularjs property undefined in controller

Question

Trying to reset password through email. After clicking reset link in email and directed to reset page, console is able to output the "$scope.username" value, however right next line it throws error as "username" not defined. Error Screenshot

Not sure where went wrong. Thanks.

.controller('resetCtrl', function(User, $routeParams, $scope, $timeout, $location) {

    app = this;
    app.hide = true; 

    User.resetUser($routeParams.token).then(function(data) {
        if (data.data.success) {
            app.hide = false; 
            app.successMsg = 'Please enter a new password'; 
            $scope.username = data.data.user.username; 
        } else {
            app.errorMsg = data.data.message; 
        }
    });

    app.savePassword = function(regData, valid, confirmed) {
        app.errorMsg = false;
        app.disabled = true; 
        app.loading = true; 
        console.log($scope.username); // test output
        app.regData.username = $scope.username; 
            User.savePassword(app.regData).then(function(data) {
                app.loading = false; 
                if (data.data.success) {
                    app.successMsg = data.data.message + '...Redirecting'; 
                    $timeout(function() {
                        $location.path('/login');
                    }, 2000);
                } else {
                    app.disabled = false; 
                    app.errorMsg = data.data.message; 
                }
            });
        }
});

Answer 1

Declare $scope.username outside, that will solve your problem, since you are using controller as syntax, it is better to have it as app.username.

.controller('resetCtrl', function(User, $routeParams, $scope, $timeout, $location) {

    app = this;
    app.hide = true; 
    app.username = '';
    User.resetUser($routeParams.token).then(function(data) {
        if (data.data.success) {
            app.hide = false; 
            app.successMsg = 'Please enter a new password'; 
            app.username = data.data.user.username; 
        } else {
            app.errorMsg = data.data.message; 
        }
    });

    app.savePassword = function(regData, valid, confirmed) {
        app.errorMsg = false;
        app.disabled = true; 
        app.loading = true; 

        app.regData.username = app.username; 
            User.savePassword(app.regData).then(function(data) {
                app.loading = false; 
                if (data.data.success) {
                    app.successMsg = data.data.message + '...Redirecting'; 
                    $timeout(function() {
                        $location.path('/login');
                    }, 2000);
                } else {
                    app.disabled = false; 
                    app.errorMsg = data.data.message; 
                }
            });
        }
});