title: Template not updating when controller property changes
body: <p>Caveat: This is part of my first ember app.</p>
  
  <p>I have an <code>Ember.MutableArray</code> on a controller. The corresponding view has an observer that attempts to rerender the template when the array changes. All the changes on the array (via user interaction) work fine. The template is just never updated. What am I doing wrong?</p>
  
  <p>I'm using Ember 1.2.0 and Ember Data 1.0.0-beta.4+canary.7af6fcb0, though I guess the latter shouldn't matter for this.</p>
  
  <p>Here is the code:</p>
  
  <pre class="lang-js prettyprint-override"><code>var ApplicationRoute = Ember.Route.extend({
    renderTemplate: function() {
      this._super();
      var topicsController = this.controllerFor('topics');
      var topicFilterController = this.controllerFor('topic_filter');
      this.render('topics', {outlet: 'topics', controller: topicsController, into: 'application'});
      this.render('topic_filter', {outlet: 'topic_filter', controller: topicFilterController, into: 'application'});
    },
  });
  
  module.exports = ApplicationRoute;
  
  
  var TopicFilterController = Ember.Controller.extend({
    topicFilters: Ember.A([ ]),
    areTopicFilters: function() {
      console.log('topicFilters.length -&gt; ' + this.topicFilters.length);
      return this.topicFilters.length &gt; 0;
    }.property('topicFilters'),
    getTopicFilters: function() {
      console.log('getTopicFilters....');
      return this.store.findByIds('topic', this.topicFilters);
    }.property('topicFilters'),
    actions: {
      addTopicFilter: function(t) {
        if(this.topicFilters.indexOf(parseInt(t)) == -1) {
          this.topicFilters.pushObject(parseInt(t));
        }
        // this.topicFilters.add(parseInt(t));
        console.log('topicFilters -&gt; ' + JSON.stringify(this.topicFilters));
      },
      removeTopicFilter: function(t) {
        this.topicFilters.removeObject(parseInt(t));
        console.log('topicFilters -&gt; ' + JSON.stringify(this.topicFilters));
      }
    }
  });
  
  module.exports = TopicFilterController;
  
  
  var TopicFilterView = Ember.View.extend({
    topicFiltersObserver: function() {
      console.log('from view.... topicFilters has changed');
      this.rerender();
    }.observes('this.controller.topicFilters.[]')
  });
  
  module.exports = TopicFilterView;
  
  
  // topic_filter.hbs
  {{#if areTopicFilters}}
    &lt;strong&gt;Topic filters:&lt;/strong&gt;
    {{#each getTopicFilters}}
      &lt;a {{bind-attr href='#'}} {{action 'removeTopicFilter' id}}&gt;{{topic}}&lt;/a&gt;
    {{/each}}
  {{/if}}
  
  
  var TopicsController = Ember.ArrayController.extend({
    needs: ['topicFilter'],
    all_topics: function() {
      return this.store.find('topic');
    }.property('model', 'App.Topic.@each'),
    actions: {
      addTopicFilter: function(t) {
        App.__container__.lookup('controller:topicFilter').send('addTopicFilter', t);
      }
    }
  });
  
  module.exports = TopicsController;
  
  
  // topics.hbs
  &lt;ul class="list-group list-unstyled"&gt;
    {{#each all_topics}}
      &lt;li class="clear list-group-item"&gt;
        &lt;span class="badge"&gt;{{entryCount}}&lt;/span&gt;
        &lt;a {{bind-attr href="#"}} {{action 'addTopicFilter' id}}&gt;{{topic}}&lt;/a&gt;
      &lt;/li&gt;
    {{/each}}
  &lt;/ul&gt;
  </code></pre>