Why the value assigned in method is not reflecting in UI - html

Question

I am calling a function on click of li data. Am passing the li data into that function and am trying to modify the data, but the data is not getting modified. Please suggest. Here is the plunkr.
https://next.plnkr.co/edit/ENExN1q40yY9dVFL?open=lib%2Fscript.js&deferRun=1&preview
$scope.selectRow = function(folders) {
console.log(folders);
folders = 'apple';
$http({
method: "GET",
url: "https://reqres.in/api/users?page=2",
headers: {
'Content-Type': 'application/json'
}
}).then(function(response) {
folders = response.page;
});
}

Answer 1

To achieve that you need to change the $scope.folderList not the folders.
Changing the function to this:
$scope.selectRow = function(folders) {
$http({
method: "GET",
url: "https://reqres.in/api/users?page=2",
headers: {
'Content-Type': 'application/json'
}
}).then(function(response) {
var index = $scope.folderList.indexOf(folders);
if (index >= 0 ) {
$scope.folderList[index] = String(response.data.page)
}
});
}
https://next.plnkr.co/edit/h3XKo5klP2F1qmAg?open=lib%2Fscript.js&deferRun=1

Answer 2

Folders is a variable that only exists in the method in your controller and then in the ng-repeat directive in your Html. Nowhere else does it exist so it's basically not a valid variable and is out of scope. In the ng-repeat directive you assign a name to the items in a list, so you could call it fuzzlebumps and it would still work.
So my suggestion: if you want to keep a variable in scope correctly do this in your controller to initialise it:
$scope.nameOfVariable;
Or in your case:
$scope.folders;
This is creating a variable that is bound to the scope. Scope is very important in JS so do a google search for the basics mate.