AngularJS REST request updates a scope variable's value but the change not visible on front-end

Issue

I am currently working with AngularJS 1.8. I have a view with a button. After I click on the button, a modal view appears and I use ng-init="set_my_url()" to call my controller function which sends a REST request which returns an URL address.

After I get this URL address from the REST request, I assign its value to a scope variable $scope.my_url.

The problem is when I call console.log($scope.my_url) after the REST request is completed, I get a valid URL address, but the value of $scope.my_url is not changed on the front-end view – on the front-end the variable $scope.my_url is EMPTY. I don’t know why. How do I fix it?

/modal.html (Modal’s VIEW):

<div class="modal" ng-controller="link_modal">
    <table>
        <tr>
            <td>
                <div class="modal-body">
                    <div class="fullHeight">
                        <div class="inner">
                            <table>
                                <tbody>
                                    <tr ng-init="set_my_url()">
                                        <td colspan="2">
                                            <?= t('Your URL address:');?>:
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <input type="text" ng-value="my_url" />  
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

/js/controllers/modal_link.js (CONTROLLER)

app.controller('modal_link', function($scope, $element) {

    $scope.set_my_url = function() {

            var r = new Rest(user, "/my_api_endpoint", false);

            r.ignore401 = true;

            r.always(function(response) {
                
                $scope.url = response.url;

                console.log($scope.url);    // This value is correctly updated but the change is not visible on the front-end

            });

            r.post({
                data : JSON.stringify($scope.data)
            });
    };

});

Solution

You’re setting your value to $scope.url, not $scope.my_url. Additionally, you may want add a view model for simple data type (strings, numbers, etc) as the 2-way binding may act funky without it.

app.controller('modal_link', function($scope, $element) {
    $scope.vm = {
        url = '';
    }

    $scope.set_my_url = function() {
        // ... some code
        
        r.always(function(response) {                
            $scope.vm.url = response.url;
        });

    // other code
    };
});

<td colspan="2">
    <input type="text" ng-value="vm.url" />  
</td>

Answered By – Esaith

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0