console.log in AngularJS executing after scope function

Question

I am new to Angular JS and I have a basic Angular App that simply sets up a scope object, sets up a few functions to initialize/create the scope object. When I use a console.log within my function it is reporting the $scope values that are set at the end of the scope function rather than the values of the scope object at the moment of console.log. I'm sure this is a basic execution order issue and I would appreciate any explanation or help with this issue.

Here is the angular code:

var module = angular.module('my-app', []);

function MainController($scope)
{
    $scope.testDict = {};

    $scope.createNewTestDict = function(){
        $scope.testDict.test1 = {1: false, 2: false, 3: false}
    }

    $scope.initializeDict = function(){
        $scope.createNewTestDict();
        console.log($scope.testDict);
        $scope.testDict.test1 = {1: true, 2: true, 3: true}
    }

    $scope.initializeDict();
}

JSFiddle Here: http://jsfiddle.net/U6ZKr/7/

So you will notice that the console.log in the actual scope object at the time of the log should be all values false, but they are coming out all true which was set after the console.log.

Thanks in advance for your help!

Edmar Miyake · Accepted Answer · 2013-10-26 00:12:27Z

8

Since $scope.testDict is passed as a reference to the console.log and it is evaluated asynchronously, the value might not accurate.

One alternative is to use console.log(JSON.stringify($scope.testDict)); to see the right results.

answered Oct 26, 2013 at 0:12

Edmar Miyake

12.4k3 gold badges40 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Ennis · Accepted Answer · 2013-10-26 00:07:50Z

1

Seems to just be a peculiarity with the way the dev tools work.

Try logging $scope.testDict.test1 instead, and you'll see the values you want.

My guess is that the contents of the deep objects you log don't get evaluated until you click the little triangle to open them up and look inside. In this case, by that time you inspect it, you've already changed the contents.

answered Oct 26, 2013 at 0:07

Kevin Ennis

14.5k2 gold badges46 silver badges44 bronze badges

1 Comment

Skylude Over a year ago

Ahhh yes! Thank you, I guess since I've never been logging data that changes so frequently I haven't run into this issue. Good eye!

fabmilo · Accepted Answer · 2013-10-26 00:09:23Z

0

You are making the incorrect assumption that the Chrome debugger console.log the value immediately. It will log it but asynchronously.

You can use Google Chrome's script debugger to step in and see this effect.

answered Oct 26, 2013 at 0:09

fabmilo

48.5k16 gold badges108 silver badges123 bronze badges

1 Comment

Skylude Over a year ago

I would hope that console.log would eventually log the correct values however at the point in time I made the call to console.log -- I used the answer above and logged the item directly vs the entire dictionary and the values are as I expect. Still interesting if console.log would log the updated values instead of the ones at the origination of the call to console.log -- as Edmar suggested in another answer it could be because of the passing of the reference vs the actual object. Thanks for your time!!

Collectives™ on Stack Overflow

console.log in AngularJS executing after scope function

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related