AngularJS scope variables not updating in jQuery promise/deferred

Question

I am building a single page application on AngularJS and I have a controller set up with a function that is run on a button click. This function runs with a promise. When the function is resolved I am updating a root variable and changing the $location path. But the root variable and $location dont seem to be updating.

Please note this all code is exampled from production

DOM:

<div ng-controller="ExampleController">
    <button ng-click="button_function('I am a variable')">Run function</button>
</div>

Controller:

app.controller('ExampleController', ['$scope', '$location', function($scope, $location) {

    $scope.button_function = function(variable) {
        $scope.$root.show_something = true;

        my_function.something(variable).done(function(data) {
            if (data) {
                $scope.$root.show_something = false;
                $location.path('/go-to-path');
            } else {
                alert('Something went wrong');
            }
        }]);
    };

}]);

This is the my_function code:

var my_function = {
    something: function(variable) {
        var deferred = $.Deferred();

        var window = window.open('http://dynamic.url/', '_blank');

        $(window).on('loadstart', function(e) {
            var url = e.originalEvent.url;

            if (url === 'http://dynamic.url/expected_response') {
                window.close();
                deferred.resolve({
                    key_1: 'data',
                    key_2: 'more data'
                });
            }

        });

        return deferred.promise();
    }
};

All looks good right? But when the my_function.something(variable) is "done" the $location and $scope.$root.show_something don't seem to update.

Am I doing something wrong?

Thanks

Possible duplicate of [How to update controller variable from jquery?](http://stackoverflow.com/questions/16886222/how-to-update-controller-variable-from-jquery) — Jorrex, Jul 29 '16 at 09:38

score 0 · Answer 1 · answered Jul 29 '16 at 10:01

0

You should return deferred.promise instead of deferred.promise().

--edit: my bad I didn't see you are not using $q as I misread.

answered Jul 29 '16 at 10:01

DiDay

11
2

score 0 · Accepted Answer · edited May 23 '17 at 12:14

I have found the fix.

In my controller after the deferred is "done" I wrapped my variables in $timeout

app.controller('ExampleController', ['$scope', '$location', '$timeout', function($scope, $location, $timeout) {

    $scope.button_function = function(variable) {
        $scope.$root.show_something = true;

        my_function.something(variable).done(function(data) {
            if (data) {
                $timeout(function() {
                    $scope.$root.show_something = false;
                    $location.path('/go-to-path');
                }, 1);
            } else {
                alert('Something went wrong');
            }
        }]);
    };

}]);

Answer found here

AngularJS scope variables not updating in jQuery promise/deferred

2 Answers2