Angularjs property undefined in controller - angularjs

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;
}
});
}
});