Diagram doesnt render UIB TABSET

I am trying to incorporate the GOJS Diagram as part of modal popup which has a UIB TABSET which has 4 tabs and this diagram is part of an HTML included on 3rd TAB. The issue that we have here is for some reason the diagram initializes to zero size since it’s not on the first one.

The same diagram works perfectly alright when I call that html as part of the first tab. Things to be noted here is each tab includes a html file which has its own controller.

I went through one of the forum which recommends calling the below function

myDiagram.requestUpdate() // here myDiagram has my diagram description

(function() {
    'use strict';

        .directive('goDiagram', function() {
  return {
    restrict: 'E',
    template: '<div></div>',  // just an empty DIV element
    replace: true,
    scope: { model: '=goModel' },
    link: function(scope, element, attrs) {
      var $ = go.GraphObject.make;
      var fieldTemplate =
          $(go.Panel, "TableRow",  // this Panel is a row in the containing Table
            new go.Binding("portId", "name"),  // this Panel is a "port"
              background: "transparent",  // so this port's background can be picked by the mouse
              fromSpot: go.Spot.Right,  // links only go from the right side to the left side
              toSpot: go.Spot.Left,
              // allow drawing links from or to this port:
              fromLinkable: true, toLinkable: true
              { width: 12, height: 12, column: 0, strokeWidth: 2, margin: 4,
                // but disallow drawing links from or to this shape:
                fromLinkable: false, toLinkable: false },
              new go.Binding("figure", "figure"),
              new go.Binding("fill", "color")),
              { margin: new go.Margin(0, 2), column: 1, font: "bold 13px sans-serif",
                // and disallow drawing links from or to this text:
                fromLinkable: false, toLinkable: false },
              new go.Binding("text", "name")),
              { margin: new go.Margin(0, 2), column: 2, font: "13px sans-serif" },
              new go.Binding("text", "info"))

      var diagram =  // create a Diagram for the given HTML DIV element
        $(go.Diagram, element[0],
            nodeTemplate: $(go.Node, "Auto",
                            { locationSpot: go.Spot.Center,
            				  movable: false,
                              copyable: false,
                              deletable: false
                            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                                    { fill: "#EEEEEE" }),
                                  // the content consists of a header and a list of items
                                  $(go.Panel, "Vertical",
                                    // this is the header for the whole node
                                    $(go.Panel, "Auto",
                                      { stretch: go.GraphObject.Horizontal },  // as wide as the whole node
                                        { fill: "#1570A6", stroke: null }),
                                          alignment: go.Spot.Center,
                                          margin: 3,
                                          stroke: "white",
                                          textAlign: "center",
                                          font: "bold 12pt sans-serif"
                                        new go.Binding("text", "key"))),
                                     // this Panel holds a Panel for each item object in the itemArray;
                                        // each item Panel is defined by the itemTemplate to be a TableRow in this Table
                                        $(go.Panel, "Table",
                                            padding: 2,
                                            minSize: new go.Size(100, 10),
                                            defaultStretch: go.GraphObject.Horizontal,
                                            itemTemplate: fieldTemplate
                                          new go.Binding("itemArray", "fields")
                                        )  // end Table Panel of items
                                      )  // end Vertical Panel
                            linkTemplate: $(go.Link,
                            { relinkableFrom: true, relinkableTo: true,toShortLength: 4 },
                            $(go.Shape, { strokeWidth: 1.5 }),
                            $(go.Shape, { toArrow: "Standard", stroke: null })
            initialContentAlignment: go.Spot.Center,
            "ModelChanged": updateAngular,
            "undoManager.isEnabled": true
      // whenever a GoJS transaction has finished modifying the model, update all Angular bindings
      function updateAngular(e) {
        if (e.isTransactionFinished) scope.$apply();
      // notice when the value of "model" changes: update the Diagram.model
      scope.$watch("model", function(newmodel) {
        var oldmodel = diagram.model;
        if (oldmodel !== newmodel) {
          diagram.removeDiagramListener("ChangedSelection", updateSelection);
          diagram.model = newmodel;
          diagram.addDiagramListener("ChangedSelection", updateSelection);
      scope.$watch("model.selectedNodeData.name", function(newname) {
        if (!diagram.model.selectedNodeData) return;
        // disable recursive updates
        // change the name
        diagram.startTransaction("change name");
        // the data property has already been modified, so setDataProperty would have no effect
        var node = diagram.findNodeForData(diagram.model.selectedNodeData);
        if (node !== null) node.updateTargetBindings("name");
        diagram.commitTransaction("change name");
        // re-enable normal updates
      // update the model when the selection changes
      function updateSelection(e) {
        var selnode = diagram.selection.first();
        diagram.model.selectedNodeData = (selnode instanceof go.Node ? selnode.data : null);
      diagram.addDiagramListener("ChangedSelection", updateSelection);
    .controller('MappingController', MappingController);

    function MappingController($log, $scope, $http) {

        var vm = this;
        vm.hideMe = true;

       /* vm.mapClick = function() {
        $scope.model =go.GraphObject.make(go.GraphLinksModel,
    	            linkFromPortIdProperty: "fromPort",
    	            linkToPortIdProperty: "toPort",
    	            nodeDataArray: [
    	              { key: "Record1",
    	                fields: [
    	                  { name: "field1", info: "", color: "#F7B84B", figure: "Ellipse" },
    	                  { name: "field2", info: "the second one", color: "#F25022", figure: "Ellipse" },
    	                  { name: "fieldThree", info: "3rd", color: "#00BCF2" }
    	                loc: "0 0" },
    	              { key: "Record2",
    	                fields: [
    	                  { name: "fieldA", info: "",       color: "#FFB900", figure: "Diamond" },
    	                  { name: "fieldB", info: "",       color: "#F25022", figure: "Rectangle" },
    	                  { name: "fieldC", info: "",       color: "#7FBA00", figure: "Diamond" },
    	                  { name: "fieldD", info: "fourth", color: "#00BCF2",  figure: "Rectangle" }
    	                loc: "250 0" }
    	            linkDataArray: [
    	              { from: "Record1", fromPort: "field1", to: "Record2", toPort: "fieldA" },
    	              { from: "Record1", fromPort: "field2", to: "Record2", toPort: "fieldD" },
    	              { from: "Record1", fromPort: "fieldThree", to: "Record2", toPort: "fieldB" }
        $scope.model.selectedNodeData = null;


Below is how the html for the above controller is included on the tabset

uib-tab heading="Mapping" class="navhead" id="tab3"
                uib-tab-heading> Step 3 : Mapping
                div ng-include="'app/config_gen/templates/mapping.html'"></div>

// note i have to remove start tag for the code to appear

Most systems have an event or callback that can be fired when a tab is switched to the current tab, does the UIB TABSET have something like that?

If so, that’s where you’d want to call myDiagram.requestUpdate(). You may additionally need to call myDiagram.delayInitialization(), if the tab started up with a small (like 1x1) div.

That’s what the jQuery tabs sample does. That code is reproduced here:

   activate: function(event, ui) {
    // Needed the first time you tab to a tab with a Diagram in it,
    // because the diagram in the tab had zero size while initializing:
    if (firstTime) {
      myDiagram.delayInitialization( function() { myDiagram.requestUpdate(); } );
      firstTime = false;

    // every time after you need nothing, or in case the Diagram div changed size, this:

It might be better still if you don’t create the diagram at all until the tab gets opened, if that is possible.

Unfortunately I cannot give specific recommendations for your platform because I have no experience in it.


Thanks a bunch. Based on your recommendation. I triggered an event from the model pop up controller to $rootscope and had the directive listen to it and call the below function

 scope.$on('eventX', function(ev, args){
        	  //var firstTime = true;
	            //log('Controller1 source: ' + args.source);
	            //$log.info("Inside watch function of Directive:::");
	            if (firstTime) {
	            	diagram.delayInitialization( function() { diagram.requestUpdate(); } );
	                firstTime = false;

The diagram is not on center for some reason after this call but atleast I am seeing the diagram on the first page load.