Angular $scope losing child data in certain situation

Question

I'm having an issue where, when I simply console.log($scope.visitors) my data is fine, but when I console.log($scope.visitors) and then try to open a AngularUI Bootstrap dialog, the $scope.visitors.optionalFields object is empty.

Now, I've spent some time trying to replicate the issue in jsbin and I wasn't able to get it to happen, so it may be difficult to answer; just hoping somebody might have an idea what could be causing it.

So I have an array of objects like this:

$scope.visitors = [
    {
        company:"one",
        optionalFields: {
            passportNumber:"ppt",
            contactNumber:"tel",
            licensePlate:"1234"
        },
        firstName:"some",
        lastName:"guy",
    }
]

I ng-repeat through these with visitor in visitors and each one has a button with ng-click="editVisitorDialog(visitor)"

Now, if I make editVisitorDialog like this:

$scope.editVisitorDialog = function (visitor) {
    console.log($scope.visitors);
    console.log(visitor);
}

Then both $scope.visitors and visitor look good, they have all of their properties.

However, if I simply add to this function (i.e., the log calls are still at the top of the function), each visitor in $scope.visitors will have an empty optionalFields object.

$scope.editVisitorDialog = function (visitor) {
    console.log($scope.visitors); // missing the optionalFields items
    console.log(visitor); // missing the optionalFields items

    var modalInstance = $modal.open({
        templateUrl: 'app/checkin/edit_visitor/edit_visitor.html',
        controller: EditVisitorController,
        resolve: {
            visitor: function () {
                return visitor;
            }
        }
    });

    modalInstance.result.then(function (result) {
        console.log(result)
    }, function () {
    });
}

Answer 1

When you call console.log() with an object it doesn't really log the object. It's rather like an inspection tool where you can see the current state, not the state at the time console.log() was called.

Try console.log(visitor.optionalFields.passportNumber) instead and I guarantee that it will log "ppt" (in your example).

That in turn means that somehwere in the added code the optional fields get lost.