Unable to display new empty array after push method() using for loop- angularjs

See more:

Javascript

AngularJs

I am trying to create a webpage where when a user logs in, depending on the login user's company, I need to display select list of users from the "Users" Array.

The problem is after the push()method, the consolelog and debug both display the data in the selectedUsers list, but not in the browser.

For eg- When a user belonging to company Apple logs in, then here int he table, only users belonging to company APPLE should be displayed.

For reference- "currentUser" is the array taken from login Page using localStorage.getItem().

"users" array includes the list of all users from various companies.

"selectedUsers" an empty array where only users belonging to one company should be displayed. This is done by using for loop for users array with currentUser array. After that I push the filtered users data into selectedUsers array and display them in a table.

The console.log("filteredusers") displays the array data but its not displaying in the table
I have heard about the function called async. Should I use that? I have no idea where and how to implement that.

Looking for guidance. Thanks in advance.

PS: Yes, I have used ng-repeat user in selectedUsers in HTML page to display selectedUsers.

//Info-

    //currentUser- user array acquired from the login user page.

    // Users- List of all static users in the array.

    // selectedUsers- List of users displayed and filtered from the users array based on currentUser.company


if (localStorage.getItem("currentUser") !== null) {

        var currentUser = JSON.parse(localStorage.getItem("currentUser"));
        console.log("Received", currentUser);
    }
    else {
        console.log("Not received");
    }
    
if (localStorage.getItem("users") === null) {
        $scope.users = [
            { email: "John@yahoo.com", password: "John123", firstName: "John", lastName: "Doe", contact: "281-283-2480", role: "Supplier-Admin", company: "Apple" },
            { email: "Rick@yahoo.com", password: "Rick123", firstName: "Rick", lastName: "Fraiser", contact: "987-283-2489", role: "Supplier-User", company: "Apple" },
            { email: "Sam@yahoo.com", password: "Sam123", firstName: "Sam", lastName: "Tarly", contact: "456-786-2480", role: "BuyerAdmin", company: "Samsung" }
        ];
        localStorage.setItem("users", JSON.stringify($scope.users));
    } else {
        $scope.users = JSON.parse(localStorage.getItem("users"));
    }

//filter users based on currentUser's role and push into selectedUsers
    for (var i = 0; i<$scope.users.length; i++) {
        $scope.selectedUsers = [{}];
        if ($scope.users[i].company === currentUser[0].company) {
            $scope.selectedUsers.push($scope.users[i]);
        }
        console.log("filteredUsers", $scope.selectedUsers);
        localStorage.setItem("selectedUsers", JSON.stringify($scope.selectedUsers));
    }

What I have tried:

I have tried to push the Users array data into the selectedUsers data but it just doesn't work. The values come in the console.log but not in the table.