In ServiceNow I want to load a GoJS diagram when a tab is change in a different widget

Question

There are two tabs called 'CI' and 'MAP'. The widget with the GoJS code is embedded in the MAP tab and loads when the map tab is active on page load. However if the CI tab is active on page load the GoJS widget does not display the diagram.

Is there a way to force the map function to run when the tab is changed?

This is the HTML of the tabs widget

<div>
  <uib-tabset>
    <uib-tab heading="CI's" active="c.data.tabs[0].active">
      <div>ci tab</div>
    </uib-tab>
    <uib-tab heading="Applications" active="c.data.tabs[1].active">
      <div >map tab</div>
      <div style="display: flex; flex-wrap: wrap;">
        <!-- Widget1 - 70% width -->
        <div style="flex: 0 0 70%; max-width: 70%;">
          <widget id="nb_service_map"></widget>
        </div>
        <!-- Widget2 - 30% width -->
        <div style="flex: 0 0 30%; max-width: 30%;">
          <widget id="ci_information"></widget>
        </div>
      </div>
    </uib-tab>
  </uib-tabset>
</div>

And this is the client side script of the GoJS widget

function ($scope, $rootScope, $location) {
    var c = this;
    
  var $go = go.GraphObject.make;
  var node_id = "service_map";
  var diagram = $go(go.Diagram, node_id, {
        initialAutoScale: go.Diagram.UniformToFill,
        // define the layout for the diagram
        layout: $go(go.TreeLayout, { nodeSpacing: 5, layerSpacing: 50, angle: 90 })
      });

  diagram.model = new go.TreeModel($scope.data.map);
  var font = "13px Helvetica, Arial, sans-serif";

  diagram.nodeTemplate = $go(go.Node, "Horizontal",
                                                {
      click: function(e, node) {
                
        //var $rootScope = angular.element(document.getElementById("yourAppId")).injector().get("$rootScope");
        // Set the $rootScope.sysId value with the sys_id of the clicked node
        var ciID = node.data.sys_id;
        //console.log(ciID);
                broadcastCI(ciID);              
      }      
    },
    $go(go.Panel, "Auto",
      $go(go.Shape, { strokeWidth: 3 }),
      $go(go.TextBlock, { font: font, stroke: "white", margin: 3 },
        new go.Binding("text", "name"))
    )
  );

  diagram.linkTemplate = $go(go.Link, { selectable: false }, $go(go.Shape)); 

  diagram.addDiagramListener('DocumentBoundsChanged', function() {
    var diagramHeight = parseInt(diagram.documentBounds.height);
    jQuery("#" + node_id).height(diagramHeight);
  });
    
//set the filter list value
    // for record picker
  $scope.portal = {
        displayValue: $scope.data.title,
        value: $scope.data.sys_id,
        name: 'portal'
    };

//set the id value on change
    $scope.$on("field.change", function(evt, parms) {       
        if (parms.field.name == 'portal')
            changePortal(parms.newValue);
    });
    
    function changePortal(p) {
        var path = $location.path();
        var searchParms = $location.search();
        $location.search({id: searchParms.id, p: p});
    }
    
    function broadcastCI(sys_id){
            $rootScope.$broadcast("config_item", sys_id)
    }

}

    

I've tried to broadcast when the tab is loaded and ecapsulate the GoJS code in that function but it doesn't seem to work