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

Question

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

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.

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

Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) 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 '18 at 11:11
Move *$scope.accountID = customer.ACCOUNT_ID;* before *BootstrapDialog.confirm({* — Ahsan, Jun 29 '18 at 11:15

score 0 · Answer 1 · answered Jun 29 '18 at 11:27

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:

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

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

1 Answers1