title: Checkbox's checked property binding - Polymer
body: <p>I am trying to bind a <code>Polymer</code> property to the <code>CheckBox</code>'s checked property. However, the property's observer never gets fired, besides, the label also never shows any text.</p>
  
  <p>However, I am able to execute a function every time the <code>CheckBox</code> gets clicked.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;link rel="import" href="../../components/polymer/polymer.html"&gt;
  
  &lt;dom-module id="check-box-example"&gt;
    &lt;template&gt;
      &lt;div&gt;
        &lt;label&gt;
          &lt;template if="{{checked}}"&gt;Uncheck&lt;/template&gt;
          &lt;template if="{{!checked}}"&gt;Check&lt;/template&gt;
        &lt;/label&gt;&lt;br&gt;
        &lt;input type="checkbox" checked="{{checked}}" on-click="_checkBoxClicked"&gt;Check Box
      &lt;/div&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer({
        is: 'check-box-example',
        properties:{
          checked: {
            type: Boolean,
            observer: '_checkedChanged'
          }
        },
        _checkBoxClicked: function() {
          console.log("The Check Box was clicked.");
        },
        _checkedChanged: function(newValue, oldValue) {
          console.log("New Checkbox value: " + newValue);
        },
      });
    &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>What am I doing wrong? Thanks in advance.</p>