title: bind-attr with Controller property
body: <p>Consider the following code:</p>
  
  <p>Handlebars template:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="items"&gt;
      &lt;div {{bind-attr class="isArchiveActive:active"}}&gt;
          Will be highlighted if an archived item is active.
      &lt;/div&gt;
      &lt;ul class="archived-items"&gt;
          {{#each}}
              &lt;li {{bind-attr class="isActive:active"}}&gt;
                  &lt;button {{action "activate" this}}&gt;Activate&lt;/button&gt;
                  &lt;button {{action "deactivate" this}}&gt;Deactivate&lt;/button&gt;
              &lt;/li&gt;
          {{/each}}
      &lt;/ul&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>App.ItemsController = Ember.ArrayController.extend({
      actions: {
          activate: function(item) {
              item.set('isActive', true);
          },
          deactivate: function(item) {
              item.set('isActive', false);
          }
      },
      isActive: false,
      isArchiveActive: function() {
          var items = this.filterBy('isArchived', true).filterBy('isActive', true);
          return items.length &gt; 0;
      }
  });
  </code></pre>
  
  <p>Model:</p>
  
  <pre><code>App.Item = DS.Model.extend({
      title: DS.attr('string'),
      isArchived: DS.attr('boolean')
  });
  
  App.Item.FIXTURES = [{
      id: 1,
      title: 'Geometry',
      isArchived: true
  }];
  </code></pre>
  
  <p>Currently, when this code runs, the <code>bind-attr</code> inside the <code>{{#each}}</code> blocks update the active class correctly when toggling the "Activate" and "Deactivate" buttons. However, the <code>bind-attr</code> outside only works onLoad and does not update dynamically.</p>
  
  <p>Is there a way to bind the controller attributes and have it update on the fly.</p>