How to bind paper-toggle-button state to its label - Polymer

Question

I currently have several paper-toggle-button elements that receive their checked state via an iron-ajax GET, bringing JSON data of a true/false nature to set the toggles on/off respectively.

I have labels next to the buttons to display their toggled state also, with these taking the same data as the toggles themselves. However, I would like to change this so that the labels are bound to the current state of the toggle rather than the back-end JSON data.

Is this at all possible?

HTML

<paper-toggle-button id="approver"  checked$="{{current.approver}}">{{current.approver}}</paper-toggle-button>
<paper-toggle-button id="askExpert"  checked$="{{current.askExpert}}">{{current.askExpert}}</paper-toggle-button>
<paper-toggle-button id="autoConnect"  checked$="{{current.Autoconnect}}">null{{current.Autoconnect}}</paper-toggle-button>
<paper-toggle-button id="beExpert"  checked$="{{current.beExpert}}">{{current.beExpert}}</paper-toggle-button>

Answer 1

You're using attribute binding for checked (ie, checked$="{{flag}}" ), but checked is actually a property, so you should use property binding (ie, checked="{{flag}}" ) for proper data-binding notifications. Note the removed $ from the binding:

<paper-toggle-button id="approver"  checked="{{current.approver}}">{{current.approver}}</paper-toggle-button>
<paper-toggle-button id="askExpert"  checked="{{current.askExpert}}">{{current.askExpert}}</paper-toggle-button>
<paper-toggle-button id="autoConnect"  checked="{{current.Autoconnect}}">{{current.Autoconnect}}</paper-toggle-button>
<paper-toggle-button id="beExpert"  checked="{{current.beExpert}}">{{current.beExpert}}</paper-toggle-button>

demo

I believe the behavior you're seeking would be achieved simply by fixing the binding type indicated above.