ng-model does not update until I trigger the modal again [duplicate]

This question already has an answer here:

I have a very basic bootstrap modal and when the user clicks ok it assigns $scope.accountID to a value.

$scope.accountID

It works perfectly ( it prints on the console the value I wanted)

But the ng-model does not update until I trigger the modal again and {{accountID}} only updates after I open the modal again.

{{accountID}}

What is this???

Controller

// when user selects a row from the table
$scope.selectCustomer = function (customer) {
BootstrapDialog.confirm({
title: 'Confirm customer selection',
message: 'Are you sure that you want to select the customer <b>' + customer.FIRST_NAME + " " + customer.LAST_NAME + "</b> with Account ID " + customer.ACCOUNT_ID + "?",
type: BootstrapDialog.TYPE_INFO, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
btnCancelLabel: 'Cancel', // <-- Default value is 'Cancel',
btnOKLabel: 'Ok', // <-- Default value is 'OK',
btnOKClass: 'btn-primary', // <-- If you didn't specify it, dialog type will be used,
callback: function(result) {
// result will be true if button was click, while it will be false if users close the dialog directly.
if(result) {
$scope.accountID = customer.ACCOUNT_ID;
console.log(customer.ACCOUNT_ID); // this prints correctly
}
}
});
};


HTML

<pre>{{accountID}}</pre> // this only updates when I open the modal, click ok and then open modal again


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

Welcome to Stack Overflow! Please take the tour, have a look around, and read through the help center, in particular How do I ask a good question? Please ensure your title reflects your question (like the one that mplungjan added for you does). "When very basic stuff doesn't work" isn't remotely a useful title for your question.
– T.J. Crowder
Jun 29 at 11:11

I also added a really relevant tag ;)
– mplungjan
Jun 29 at 11:12

Move $scope.accountID = customer.ACCOUNT_ID; before BootstrapDialog.confirm({
– Ahsan
Jun 29 at 11:15

1 Answer
1

This row

$scope.accountID = customer.ACCOUNT_ID;


defines $scope.accountID, but you do it in your callback. A callback is a function which is executed when a job is done. In this case the callback will be executed when a certain event happens on the confirm, like clicking on a button or closing the dialog. The problem is that you want to use $scope.accountID after the confirm dialog is opened, but before the button was clicked or the dialog closed. But it is not defined in this time interval, your code is not executed in a top to bottom order, because your callback is executed later than the code below it. Therefore, you will need to define $scope.accountID at an earlier stage, in our case before confirm is called:

$scope.accountID

callback

callback

function

callback

confirm

$scope.accountID

confirm

$scope.accountID

confirm

// when user selects a row from the table
$scope.selectCustomer = function (customer) {
$scope.accountID = customer.ACCOUNT_ID;
BootstrapDialog.confirm({
title: 'Confirm customer selection',
message: 'Are you sure that you want to select the customer <b>' + customer.FIRST_NAME + " " + customer.LAST_NAME + "</b> with Account ID " + customer.ACCOUNT_ID + "?",
type: BootstrapDialog.TYPE_INFO, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
btnCancelLabel: 'Cancel', // <-- Default value is 'Cancel',
btnOKLabel: 'Ok', // <-- Default value is 'OK',
btnOKClass: 'btn-primary', // <-- If you didn't specify it, dialog type will be used,
callback: function(result) {
// result will be true if button was click, while it will be false if users close the dialog directly.
if(result) {
console.log(customer.ACCOUNT_ID); // this prints correctly
}
}
});
};