diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js
index 61a90a75c..fd519c0f6 100644
--- a/src/converse-controlbox.js
+++ b/src/converse-controlbox.js
@@ -216,7 +216,7 @@
                     this.model.on('change:closed', this.ensureClosedState, this);
                     this.render();
                     if (this.model.get('connected')) {
-                        this.initRoster();
+                        this.insertRoster();
                     }
                     if (typeof this.model.get('closed')==='undefined') {
                         this.model.set('closed', !converse.show_controlbox_by_default);
@@ -252,20 +252,14 @@
 
                 onConnected: function () {
                     if (this.model.get('connected')) {
-                        this.render().initRoster();
+                        this.render().insertRoster();
                     }
                 },
 
-                initRoster: function () {
-                    /* We initialize the roster, which will appear inside the
-                     * Contacts Panel.
+                insertRoster: function () {
+                    /* Place the rosterview inside the "Contacts" panel.
                      */
-                    converse.rosterview = new converse.RosterView({model: converse.rostergroups});
                     this.contactspanel.$el.append(converse.rosterview.$el);
-                    converse.rosterview.render().populate().then(function () {
-                        converse.rosterview.update();
-                        converse.sendInitialPresence();
-                    });
                     return this;
                 },
 
diff --git a/src/converse-rosterview.js b/src/converse-rosterview.js
index da1ae49b8..f8120d105 100644
--- a/src/converse-rosterview.js
+++ b/src/converse-rosterview.js
@@ -31,6 +31,20 @@
                 this.__super__.afterReconnected.apply(this, arguments);
             },
 
+            initRoster: function () {
+                /* Create an instance of RosterView once the RosterGroups
+                 * collection has been created (in converse-core.js)
+                 */
+                this.__super__.initRoster.apply(this, arguments);
+                converse.rosterview = new converse.RosterView({
+                    'model': converse.rostergroups
+                });
+                converse.rosterview.render().populate().then(function () {
+                    converse.rosterview.update();
+                    converse.sendInitialPresence();
+                });
+            },
+
             RosterGroups: {
                 comparator: function () {
                     // RosterGroupsComparator only gets set later (once i18n is