Filter two databases at the same time with angular-data-grid - angularjs

Question

I have two databases that I populate with two different arrays
$scope.UI = {};
$scope.gridActions = {};
$scope.storeNameArray = [];
$scope.selectedStore = {};
$scope.monthArray = [];
$scope.dayArray = [];
$scope.monthGridOptions = {
data: $scope.monthArray,
urlSync: true,
enableSorting: true,
sort: {
predicate: 'month',
direction: 'asc'
}
};
$scope.dayGridOptions = {
data: $scope.dayArray,
urlSync: true,
enableSorting: true,
sort: {
predicate: 'day',
direction: 'asc'
}
};
This is an object that is inside the arrays. The difference between two tables is either month or day key.
{
month/day: "someKey",
deposit: 0,
withdraw: 0,
store: "store name"
}
Now, I am trying to apply the filter that will filter both databases based on store name.
Here is my HTML
<div grid-data id='month' grid-options="monthGridOptions" grid-actions="gridActions" class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-dark">
<i class="icon-wallet"></i>
<span class="caption-subject font-blue bold uppercase"> Last 12 Month</span>
</div>
<div class="actions">
<md-select filter-by="store"
ng-model="selectedStore"
ng-change="gridActions.filter()"
filter-type="text">
<md-option ng-repeat="storeName in storeNameArray" ng-value="storeName">{{ storeName }}</md-option>
</md-select>
</div>
</div>
<div class="portlet-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th> Month</th>
<th> Store</th>
<th> Deposit</th>
<th> Withdraw</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td ng-bind="item.month"></td>
<td ng-bind="item.store"></td>
<td ng-bind="item.deposit"></td>
<td ng-bind="item.withdraw"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div grid-data id='day' grid-options="dayGridOptions" grid-actions="gridActions"class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-dark">
<i class="icon-wallet"></i>
<span class="caption-subject font-blue bold uppercase"> Last 12 Month</span>
</div>
<div class="actions">
<!--<div class="btn-group btn-group-devided" data-toggle="buttons">
<label class="btn btn-transparent dark btn-outline btn-circle btn-sm active">
<input type="radio" name="options" class="toggle" id="option1">Actions</label>
<label class="btn btn-transparent dark btn-outline btn-circle btn-sm">
<input type="radio" name="options" class="toggle" id="option2">Settings</label>
</div>-->
</div>
</div>
<div class="portlet-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th> Day</th>
<th> Store</th>
<th> Deposit</th>
<th> Withdraw</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td ng-bind="item.day"></td>
<td ng-bind="item.store"></td>
<td ng-bind="item.deposit"></td>
<td ng-bind="item.withdraw"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
$scope.storeNameArray has all possible store names inside that are used inside data-item.store object.
Now the table shows one filtered store, that was automatically selected on start. And when I select another store from the dropDown, nothing changes.
If I comment out the filter code, all store are correctly showed tables.
What I would like to do is make the filter work, and be able to choose which one is the first selected one.
This is the lib I am using for data-table.
https://github.com/angular-data-grid/angular-data-grid.github.io