title: How to dynamically add hub to SignalR and have different scopes
body: <p>I'm attempting to build a Dashboard with widgets (built as directives). I'd like to at a later stage have the ability to dynamically add widgets, but I'd only like the active widgets (and hubs) to receive data, thus if a widget isn't active i don't want the hub to be registered.</p>
  
  <p>Eg for the duration of the user using the app there will be a global signalR context, as well as page specific ones, which will be spawned/destroyed as needed.</p>
  
  <p><img src="https://i.stack.imgur.com/kHO2J.png" alt="enter image description here"></p>
  
  <p><strong>This is my best try ATM... which isn't working</strong></p>
  
  <p><strong>factory</strong></p>
  
  <pre><code>   (function () {
      'use strict';
  
      angular.module('app').factory('hubFactory', ['permissionSvc', 'common', hubFactory]);
  
      function hubFactory(permissionSvc, common) {
  
          var connection = [];
  
          return {
              context: function (name) {
  
                  if (!connection[name]) {
                      var conn = $.connection;
                      conn.hub.url = common.serviceUrl + '/signalr';
                      conn.hub.start();
  
                      conn.prototype.addHub = function (hubName, options) {
  
                          // defaults
                          var opts = {
                              authorize: true
                          };
  
                          angular.extend(opts, options);
  
                          if (opts.authorize) {
                              permissionSvc.createPrefilter();
                          }
  
                          var hub = conn[hubName];
  
                          var run = function () {
                              hub.server.initialise();
                          };
  
                          return {
                              hub: hub,
                              run: run
                          };
                      };
  
                      connection[name] = conn;
                  }
  
                  return connection[name]();
              }
          };
      }
  })();
  </code></pre>
  
  <p><strong>widget directive-controller</strong></p>
  
  <pre><code> controller: function ($scope) {               
  
                 var context = hubFactory.context('dashboard');
  
                 var instance = context.addHub('agreementApprovalsHub');
  
                 instance.hub.client.getAllUnapprovedAgreements = function (data) {
  
                      $scope.data = data;
                  };
  
                 instance.run();
              } 
  </code></pre>
  
  <p>The following needs to be called in the done method of the start... but what if i want to, start up the connection on page load, and then append hubs as needed (or is my thinking wrong?)</p>
  
  <p>There are various problems:</p>
  
  <blockquote>
    <p>var run = function () {
                                    hub.server.initialise();
                                };</p>
  </blockquote>
  
  <p>vs</p>
  
  <blockquote>
    <p>var run = function () {     conn.hub.start().done(function() {
                                    hub.server.initialise(); });
                                };</p>
  </blockquote>
  
  <p>TBH, it feels like i'm butchering the code, and need to probably start from scratch at this stage.. 
  I'm thoroughly confused on how to go about it all, and if its even possible.</p>