Polymer paper-tab select first tab programmatically - polymer

Question

Our paper-tabs are generated dynamically, how can we select the first tab by default and also fire the change event so that the iron page content is visible.
<paper-tabs id="scrollableTabs" selected={{selected}} scrollable >
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-tab on-click="listLiveTokens" >[[queue.queueName]]</paper-tab>
</template>
</paper-tabs>
list: function() {
this.loading=!this.loading;
this.$.list.url = "http://apicall";
var tmp = this.$.list.generateRequest();
console.log(tmp)
},
this script fetches the tab content from the api call
<iron-pages selected="{{selected}}">
<template is="dom-repeat" items="[[liveQueues]]" as="queue" >
<paper-material elevation="1">
<iron-list items="[[queueTokens]]" as="token">
<template>
<div>
<div class="item" tabindex="0">
<span class="avatar" >[[token.tokenNumber]]</span>
<a href$="{{_getDetailsLink(token.tokenId,token.tokenNumber,token.userName,token.statusType,token.userMobile,token.joinDate)}}">
<div class="pad">
<div class="primary">[[token.userName]]</div>
<div class="secondary">[[token.userMobile]]</div>
<div class="secondary dim">[[token.notes]]</div>
<div class="secondary dim">[[token.joinTime]]</div>
</div>
</a>
<iron-icon icon$="[[iconForItem(sminq)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</paper-material>
</template>
</iron-pages>

Answer 1

An event will fire every time the dom-repeat changes. You could listen to changes and set selected to 0.
<template is="dom-repeat" items="[[liveQueues]]" as="queue" on-dom-change="setSelected">
In your prototype you define the function.
setSelected: function() {
this.$.scrollableTabs.selected = 0;
}
Note that the function is called every time you update liveQueues and you may not want to reset the tabs every time.
The iron pages should update automatically, if you have data-binding to selected.

Answer 2

Well, I think that ready function is the way to initialize !
ready: function() {
this.selected = 0;
}