diff --git a/awx/ui/static/js/controllers/Sockets.js b/awx/ui/static/js/controllers/Sockets.js
index ea25524881..e3a5d7ccbf 100644
--- a/awx/ui/static/js/controllers/Sockets.js
+++ b/awx/ui/static/js/controllers/Sockets.js
@@ -14,27 +14,42 @@ function SocketsController ($scope, $compile, ClearScope, Socket) {
 
     var test_scope = $scope.$new(),
         jobs_scope = $scope.$new(),
-        job_events_scope = $scope.$new();
-
-    var test_socket = Socket({ scope: test_scope, endpoint: "test" }),
+        job_events_scope = $scope.$new(),
+        test_socket = Socket({ scope: test_scope, endpoint: "test" }),
         jobs_socket = Socket({ scope: jobs_scope, endpoint: "jobs" }),
-        job_events_socket = Socket({ scope: job_events_scope, endpoint: "job_events" });
+        job_events_socket = Socket({ scope: job_events_scope, endpoint: "job_events" }),
+        e, html;
 
-    var test_element = angular.element(document.getElementById('test_url'));
-    $compile(test_element)(test_scope);
-    var jobs_element = angular.element(document.getElementById("jobs_url"));
-    $compile(jobs_element)(jobs_scope);
-    var job_events_element = angular.element(document.getElementById("job_events_url"));
-    $compile(job_events_element)(job_events_scope);
+    test_scope.messages = [];
+    jobs_scope.messages = [];
+    job_events_scope.messages = [];
 
+    html = "<div class=\"alert alert-info\"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>\n" +
+        "<div class=\"well\">\n" +
+        "<h5>Received Messages:</h5>\n" +
+        "<ul>\n" +
+        "<li ng-repeat=\"message in messages\">{{ message }} </li>\n" +
+        "</ul>\n" +
+        "</div>\n";
+
+    e = angular.element(document.getElementById('test-container'));
+    e.append(html);
+    $compile(e)(test_scope);
+    e = angular.element(document.getElementById('jobs-container'));
+    e.append(html);
+    $compile(e)(jobs_scope);
+    e = angular.element(document.getElementById('job-events-container'));
+    e.append(html);
+    $compile(e)(job_events_scope);
+    
     test_socket.init();
     jobs_socket.init();
     job_events_socket.init();
 
-    test_scope.messages = ['Message Displayed Before Connection'];
+    test_scope.messages.push('Message Displayed Before Connection');
 
     test_socket.on('test', function(data) {
-            test_scope.messages.push(data);
+        test_scope.messages.push(data);
     });
 }
 
diff --git a/awx/ui/static/partials/sockets.html b/awx/ui/static/partials/sockets.html
index edc80f9c40..9be3d3425e 100644
--- a/awx/ui/static/partials/sockets.html
+++ b/awx/ui/static/partials/sockets.html
@@ -1,34 +1,7 @@
 <div class="tab-pane" id="sockets">
     <div ng-cloak id="htmlTemplate">
-        <div id="test_url">
-            <div class="alert alert-info"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>
-            <div class="well">
-                <h5>Received Test Messages:</h5>
-                <ul>
-                    <li>{{messages}}</li>
-                    <li ng-repeat="message in messages">{{ message }} </li>
-                </ul>
-            </div>
-        </div>
-
-        <div id="jobs_url">
-            <div class="alert alert-info"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>
-            <div class="well">
-                <h5>Received Jobs Messages:</h5>
-                <ul>
-                    <li ng-repeat="message in messages">{{ message }} </li>
-                </ul>
-            </div>
-        </div>
-
-        <div id="job_events_url">
-            <div class="alert alert-info"><strong>Socket url</strong>: {{ socket_url }} &nbsp;<strong>Status:</strong> {{ socket_status }} {{ socket_reason }}</div>
-            <div class="well">
-                <h5>Received Job Event Messages:</h5>
-                <ul>
-                    <li ng-repeat="message in messages">{{ message }} </li>
-                </ul>
-            </div>
-        </div>
+        <div id="test-container"></div>
+        <div id="jobs-container"></div>
+        <div id="job-events-container"></div>
     </div>
 </div>