Managing/saving a (nested?) 2d data array with Angular

Question

Let's say I have the following arrays:

var a = ["Sample A", "Sample B"];
var b = ["X", "Y", "Z"];

Now let's say I have a button that, when clicked, generates the header of a 2D table, like this:

Sample ASample BXYZ

...and another button that adds a new row to the table:

Sample ASample BXYZ
                                      

How would I do the following things:

• save/restore data from/to the table
• manage insertions/deletions from any of the arrays that form the header

Notes:

• the elements of the arrays that form the header can be deleted in any order, but new elements can be appended at the end.
• ... however, I expect specs to change slightly so that the elements in those arrays can change their position.

EDIT: As suggested by users, I'm adding a plunkr example: http://plnkr.co/edit/FMIgwqKKDbZOCjNTXrrh?p=preview

I know this is flawed and wrong because it's tracking the data by it's index (which is error prone).