Why do the local vars in Chrome's Sources tab have different names to what is in the JS code?
The local n is the threadID var in the JS code:

The trimmed down version of the code looks like this:
(function () {
    angular.module('az.controllers')
        .controller('threadViewCtrl', ['$rootScope', '$scope'
            function ($rootScope, $scope) {
                $scope.retrieveThreadMessages = function (companyReference, threadID) {                    
                    messagesApi.getMessages({ companyReference: companyReference, threadID: threadID, markAsRead: true }, function success(data) {
                    //Code omitted
                });
            };
    }]);
})();
Why am I unable to update the value of n?
I can double click the value, change it to something else, and it looks like it's been updated. But when I execute it and view the values used in the HTTP call in the Network tab, it used the old value.
How can I update threadID before making the HTTP GET request?
I'm using Chrome 91.0.4472.124 (Official Build) (64-bit), but have also had the same problem using Microsoft Edge.
I thought I could call the $scope.retrieveThreadMessages() function myself from Console, but $scope is undefined.
I tried using this code from one of the comments in this answer, but I couldn't find $scope.
angular.element(document.body).scope()
