title: Bootstrap 3 Modal with Ember.js, no data in modal
body: <p>I want to use Bootstrap 3's modal along with Ember.js. So far, I have been unsucessfull. The data modal itself is not appearing, although the screen is doing the fade.
  my app.js:</p>
  
  <pre><code>App = Ember.Application.create();
  
  App.ApplicationRoute = Ember.Route.extend({
      events: {
          showGroups: function() {
              this.container.lookup('view:groups').append();
          }
      }
  });
  
  App.GroupsRoute = Ember.Route.extend({
      model: function() {
          return groups;
      }
  });
  
  App.GroupsView = Ember.View.extend({
      templateName: "groups",
      classNames: ["modal", "fade"],
      didInsertElement: function() {
          this.$().modal('show');
          this.$().one("hidden", this._viewDidHide);
      },
      // modal dismissed by example clicked in X, make sure the modal view is destroyed
      _viewDidHide: function() {
          if (!this.isDestroyed) {
              this.destroy();
          }
      },
      // here we click in close button so _viewDidHide is called
      close: function() {        
          this.$(".close").click();
      }
  });
  
  var groups = [
      {
          id: 1,
          name: 'Family Reunion',
      },
      {
          id: 2,
          name: 'California Trip',
      },
      {
          id: 3,
          name: 'Dream Vacations',
      },
      {
          id: 4,
          name: 'Fun for Kids',
      },
  ];
  </code></pre>
  
  <p>My templates:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt;
          &lt;button class="btn actionBtn userControls" {{action showGroups}}&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; &amp;nbsp My Favorites&lt;/button&gt;
            &lt;!-- Split button --&gt;
            &lt;div class="btn-group"&gt;
              &lt;button type="button" class="btn secondaryBtn userControls"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;  &amp;nbsp Hello, &lt;b&gt;User&lt;/b&gt;&lt;/button&gt;
              &lt;button type="button" class="btn secondaryBtn dropdown-toggle userControls" data-toggle="dropdown"&gt;
                &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class="dropdown-menu secondaryMenu" role="menu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Account Settings&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="groups"&gt;&gt;
        &lt;div class="modal fade" id="favoritesModal"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
  
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title tertiaryHeading"&gt;My Favorite Groups&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                {{#each model}}
                  {{render "group" this}}
                {{/each}}
              &lt;/div&gt;    
  
              &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn actionBtn"&gt;Create New Group&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;!-- /.modal-content --&gt;
          &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
        &lt;/div&gt;&lt;!-- /.modal --&gt;
        &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="group"&gt;
        &lt;button class="btn secondaryBtn groupBtn"&gt;{{name}}&lt;/button&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I make this work? I'm new to Ember, and not sure if I understand how to inject data into a view?</p>