Carrying Array Accross Multiple Angular Functions

I'm trying to implement a way for my program to keep track of filters the user has selected and searched through. The input will be in a text-box, multiple text boxes. I have a textbox for each option (TimeStamp, SourceHost, UUID, etc) [I'm building an internal application]. I need to be able to carry the filter list for my parameters and I decided to use an Array object but I am having some issues. I initialize my array but cannot access the information in other functions

app.controller("AppCtrl", function($http, $scope){
    var app= this;
    $scope.filterList = [];
    $scope.filterList.push("test");
    console.log($scope.filterList);
    $scope.incData = function(page, filterList){
        callingIrrelevantFunction(page)
        console.log($scope.filterList);

The first console.log outputs "test". But when I use it later on (this isn't my intended use case I just wanted to make sure I could scope an array and call it inside of function) the output isn't correct. The actual intended use case is that I will be appending it to the end of the url.

Edit: Here is a shareable version of my code:

app.controller("AppCtrl", function($http, $scope){
   var app = this;
   $scope.filterList = [];
   $scope.filterList.push("uuid=9022");
   $scope.filterList.push("source_host=Kani");

   function foobar(filterList){
       console.log("inside foobar");
       console.log(filterList);
   }
   foobar($scope.filterList);
});

Outputs "[]".

Edit #2:

When change my code to just an array, without "$scope." in front of it, the code works. But I believe I do need the "$scope." for it to work with angular directives.