Polymer paper-tab with iron-pages model binding

Question

How to handle model inside polymer iron-pages for paper-tab. See my code below:

<paper-tabs selected="{{selected}}">
 <paper-tab>Tab 1</paper-tab>
 <paper-tab>Tab 2</paper-tab>
</paper-tabs>
<iron-pages selected="{{selected}}">
 <div>
       {{model.tab1.content}} //not working
 </div>
 <div>
        {{model.tab2.content}} //not working
 </div>
</iron-pages>
<script>
        Polymer({
            is: "my-element",
            properties: {
                model: {
                    type: Object,
                    value: {tab1...}
                }
            }
        });
    </script>

So, model.tab1.content is not working inside iron-pages.

Answer 1

You can create a custom element that wraps both paper-tabs and iron-pages then the two way binding of the selected attribute will cause the tabs and pages to be in sync.

here is a link to a gist for easy-paper-tabs