How to access variable in angular scope?

Question

When I insert console.log($scope) into my code, I get the following result:

$get.k.$new.a.$$childScopeClass.$$childScopeClass {$$childTail: null, $$childHead: null, $$nextSibling: null, $$watchers: Array[4], $$listeners: Object…}
$$childHead: null
$$childScopeClass: null
$$childTail: null
$$listenerCount: Object
$$listeners: Object
$$nextSibling: null
$$prevSibling: $get.k.$new.a.$$childScopeClass.$$childScopeClass
$$watchers: Array[4]
$id: "005"
$parent: Object
Bad: false
Good: true
Search: function () {
address: "63146"
focus: "63146"
this: $get.k.$new.a.$$childScopeClass.$$childScopeClass
__proto__: Object

The variable I am interested in is Good: true. However, when I call console.log($scope.Good) on the next line, it returns false.

How do I call the above "Good" variable that returns true in the console?

edit: Controller

app.controller('locationController', function ($scope) {
    $scope.Good = false;
    $scope.Bad = false;

    var mapOptions = {
        center: { lat: 38.68, lng: -90.46 },
        zoom: 8
    };

    var image = {
        url: 'app/assets/img/marker.png'
    }

    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
    $scope.Search = function () {
        $scope.Good = false;
        $scope.Bad = false;
        var address = $scope.address;
        var radius = parseInt(50, 10) * 1000;
        var marker_start = new google.maps.Marker({
            position: { lat: 38.688757, lng: -90.464391 },
            map: map,
            icon: image,
            title: ""
        });

        var fill = '#fff';
        var populationOptions = {
            strokeColor: '#66FF99',
            strokeOpacity: 0.2,
            strokeWeight: 2,
            fillColor: fill,
            fillOpacity: 0.35,
            map: map,
            center: new google.maps.LatLng(38.68, -90.46),
            radius: 80000
        };

        var lat = '';
        var lng = '';
        var geocoder = new google.maps.Geocoder();
        var marker_user = null;

        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                lat = results[0].geometry.location.lat();
                lng = results[0].geometry.location.lng();
                marker_user = new google.maps.Marker({
                    position: { lat: lat, lng: lng },
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title: "Your Location"
                });

                if (google.maps.geometry.spherical.computeDistanceBetween(marker_user.getPosition(), marker_start.getPosition()) < 80000)
                    $scope.$apply(function () { $scope.Good = true; });
                else
                    $scope.$apply(function () { $scope.Bad = true; });
            }
        });

        console.log($scope);
        console.log($scope.Good);
        console.log($scope.Bad);
        var cityCircle = new google.maps.Circle(populationOptions);
    };
});

This is a common problem when you log an `Object` to the console. The console is showing you the up to the moment values of that object. I'll try to find an existing answer that explains why you see what you see, and link back here if I do. — Sunil D., May 09 '15 at 22:22
Here is an [explanation](http://stackoverflow.com/questions/7389069/console-log-object-at-current-state) for why the console shows what it does. It may not solve the actual problem you're debugging. (EDIT: In fact, you're setting `$scope.Good` correctly in your callback, so there's probably no other issue w/your code) — Sunil D., May 09 '15 at 22:28

JB Nizet · Accepted Answer · 2015-05-09T22:27:32.250

3

Good becomes true only after the callback function passed to geocoder.geocode() has been called. But you're printing it before it has been called, right after having asked the geocoder to geocode.

ask the geocoder to geocode. This sends an HTTP request to Google
print Good: it's still false
when the response from Google comes in, the callback is executed and Good becomes true

edited May 09 '15 at 22:27

answered May 09 '15 at 22:22

JB Nizet

678,734
91
1,224
1,255

Note that he prints `$scope` and `$scope.Good` to the console all BEFORE the callback has been executed. See my comment above... – Sunil D. May 09 '15 at 22:23
Err yes, that's pretty much exactly what my answer says. – JB Nizet May 09 '15 at 22:25
No, if it were the problem you speak of the value shown when he logs just the `$scope` would also be false. In this case it shows true. I'm suggesting that [this type of problem](http://stackoverflow.com/questions/7389069/console-log-object-at-current-state) is happening. – Sunil D. May 09 '15 at 22:27
1

@SunilD. just because console is live reference not snapshot doesn't make the answer wrong... answer explains what the actual execution flow is – charlietfl May 09 '15 at 22:38
@charlietfl but look at the last 4-5 lines of the controller. The OP seems to be asking why do I see true when I log `$scope` and false when I log `$scope.Good`? Those two statements are executed sequentially, the callback cannot effect the value between those two statements. – Sunil D. May 09 '15 at 22:42
@SunilD. simplest thing if you don't agree....is right up another answer. If you think OP needs to be told to move the logging statement, and that they can't interpret it from this answer, put it in your answer. – charlietfl May 09 '15 at 22:45

How to access variable in angular scope?

1 Answers1