Displaying/hiding smart tables based off data does not work.

Hello, in my XML I have two smarttables. Only one smarttable is supposed to be visible at a time. I toggle the visibility by setting visible to whether the data I am getting from the backend is true or false. To make things easier though, let's just say I am setting visible to true for one table and false for another table.

When I set visible to false for the first table and true for the second table, the second table displays. When I set visible to true for the first table and false for the second table, no table displays. It seems my project completely ignores the first table and just goes to the second table to see if the visibility is on for that one. Why is this happening and how do I fix this?

My XML is something like this:

<smartTable:SmartTable 
id="firstTable"
demandPopin="true"
enableAutoBinding="true"
entitySet="Flowers"
visible="true">
</smartTable:SmartTable>

<smartTable:SmartTable 
id="secondTable"
demandPopin="true"
enableAutoBinding="true"
entitySet="Flowers"
visible="false">
</smartTable:SmartTable>

My controller code is like this:

if (this.getView().byId("firstTable").getVisible()){
this.flowersSmartTable = this.getView().byId("firstTable");
}
else {
this.flowersSmartTable = this.getView().byId("secondTable");
}