Cytoscape.js, Graph is not loaded while using with angular - angularjs

Question

I have been working on a project in which I used Cytoscape.js with Angular.js. I am facing an issue regarding the loading of the graph. The problem I am facing is that the graph doesn't load on first attempt when the page is refreshed.
The specific scenario is when I am on a view with graph in the view's html, If I refresh the page from that view, the next time I open the graph, the graph shows correctly. But when I am not on a view with graph in it's html, the graph won't load if I refresh my page from that view.
I have searched and found an almost similar problem someone else faced but the solution is not helping me.
Cytoscape.js, graph is not displayed with correct settings
Here is my HTML Code.
<div class="col-sm-12" style="height:100%;width:100%;margin-top:5px;">
<div ng-show="cyLoaded" ng-model="cyLoaded" id="cy" ng-init="ShowProjectRelationGraph(1)" ></div>
<div ng-show="!cyLoaded" ng-model="cyLoaded" class="row" style="align-items:center;margin-top:100px;">
<div class="col-sm-5"></div>
<div class="col-sm-2" style="padding-left:6%">
<div class="spinner-lg">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
</div>
Here is my .js code
angular.module("VPMWeb")
.factory('nodesGraph', ['$q', function($q) {
var cy;
var nodesGraph = function(elements, signal) {
var deferred = $q.defer();
// put people model in cy.js
var eles = [];
for (var i = 0; i < elements.nodes.length; i++) {
eles.push({
group: 'nodes',
data: {
id: elements.nodes[i].data.id,
parent: elements.nodes[i].data.parent,
s_id: elements.nodes[i].data.s_id
}
});
}
for (var i = 0; i < elements.edges.length; i++) {
eles.push({
group: 'edges',
data: {
id: elements.edges[i].data.id,
source: elements.edges[i].data.source,
target: elements.edges[i].data.target,
}
});
}
$(function() { // on dom ready
cy = cytoscape({
container: $("#cy")[0],
//zoomingEnabled: false,
userZoomingEnabled: false,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(s_id)',
'text-valign': 'center',
'text-halign': 'center',
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}),
layout: {
name: 'cose',
padding: 10,
fit: true,
randomize: true
},
elements: eles,
ready: function() {
deferred.resolve(this);
}
});
cy.center();
}); // on dom ready
return deferred.promise;
};
nodesGraph.listeners = {};
function fire(e, args) {
var listeners = nodesGraph.listeners[e];
for (var i = 0; listeners && i < listeners.length; i++) {
var fn = listeners[i];
fn.apply(fn, args);
}
}
function listen(e, fn) {
var listeners = nodesGraph.listeners[e] = nodesGraph.listeners[e] || [];
listeners.push(fn);
}
return nodesGraph;
}]);
Can someone please have a look and help with it. Thanks in advance.

Answer 1

If you're not setting the dimensions of the Cytoscape.js div properly in advance, then you'll have to call cy.resize().
Refs:
http://js.cytoscape.org/#getting-started/including-cytoscape.js
http://js.cytoscape.org/#cy.resize