In JavaScript, after setting the attribute of an array of objects, why does the element remain undefined?

First, I inherited a large project and set myself the task of maintaining / strengthening it. In code elsewhere, the previous developer uses / uses an object for Timezone, which has three attributes.

I recently had to add a readable timezone to a form. In the form of a web page in an Angular table, in a field that is a select box to select SystemTimeZone, the user can select a time zone without issue. I am using TimezoneOffset as a list box id for a select box, with the timezone name in the box. We currently only have one time zone, so the offset shows that GMT, Standard and Daylight Savings are working very well.

Later in my code, I want to change the timezone type from the number that appeared in the picker to a complete SystemTimeZone object that shows the description, name, and TimezoneOffset in order to reuse the previous developer's code.

Here is the code for SystemTimezones from my config.js file. The variable is part of $ scope.

var SystemTimezones = [
{
    "Name" : "Pacific Standard Time (GMT-08:00)",
    "Description" : "(GMT-08:00) Pacific Standard Time (US & Canada)",
    "TimezoneOffset" : -8 * millis_per_h,
}, 
{
    "Name" : "Pacific Daylight Time (GMT-07:00)",
    "Description" : "(GMT-07:00) Pacific Daylight Time (US & Canada)",
    "TimezoneOffset" : -7 * millis_per_h,
},
{
    "Name" : "Greenwich Mean Time (GMT-00:00)",
    "Description" : "(GMT-00:00) Greenwich Mean Time",
    "TimezoneOffset" : 0,
}
];

      

        
        
        
      

    

Here is the code where I am trying to set (or reset) that item.

$scope.saveData = function() {
    console.log("Inside saveData...");
    console.log("$scope is Next...");
    console.dir($scope);

    var intdataSheetDatasetLength = $scope.dataSheetDataset.length;
    var intSystemTimezonesLength = $scope.SystemTimezones.length;
    console.log("intdataSheetDatasetLength = " + intdataSheetDatasetLength + ", intSystemTimezonesLength = " + intSystemTimezonesLength);
    for (var dd = 0; dd < intdataSheetDatasetLength; dd++)
    {               
        for (var st = 0; st < intSystemTimezonesLength; st++)
        {
            console.log("dd = " + dd + ", st = " + st);
            console.log("$scope.SystemTimezones[st].TimezoneOffset = " + $scope.SystemTimezones[st].TimezoneOffset + ", $scope.dataSheetDataset[dd].Timezone = " + $scope.dataSheetDataset[dd].Timezone);       
            if ($scope.SystemTimezones[st].TimezoneOffset.toString() === $scope.dataSheetDataset[dd].Timezone.toString())
            {
                var tmpTimezone = $scope.dataSheetDataset[dd].Timezone;
                console.log("tmpTimezone = " + tmpTimezone);
                //$scope.dataSheetDataset[dd].Timezone = undefined;
                console.log("$scope.SystemTimezones[st] = ");
                console.dir($scope.SystemTimezones[st]);
                $scope.dataSheetDataset[dd].Timezone = $scope.SystemTimezones[st];
                console.log("$scope.dataSheetDataset[dd].Timezone = ");
                console.dir($scope.dataSheetDataset[dd].Timezone);
                st = intSystemTimezonesLength;
            }
        }
    }
    console.log("$scope.dataSheetDataset is next...");
    console.dir($scope.dataSheetDataset);
};

      

        
        
        
      

    

When the code runs after the item is installed in the IE debug window, I can see that the update has taken place. However, after breaking out of the loop and displaying the contents of the $ scope.dataSheetDataset parameter, the timezone is undefined again.

Can anyone tell me why this is happening?