Angular directive for D3 datamap rendering only once - angularjs

Question

So, I made an Angular directive which renders a D3 datamap in an HTML template. I pass the data to the directive via a 'data' attribute. The problem I am facing is that the map displays perfectly when the page is loaded for the first time. However, when I come back to the template by navigating from other templates (routing done through 'ui-route'), the map doesn't get rendered and there is no error in the console either. Here's my directive:
app.directive('stabilityMap', function() {
var containerid = document.getElementById('world-map-container');
var margin = 20,
padding = 50,
width = containerid.offsetWidth - margin;
height = containerid.offsetHeight - margin;
return {
restrict: 'A',
scope: {
data: '=',
},
link : function(scope, element, attrs) {
scope.$watch('data', function(newVal, oldVal) {
var colorScale = d3.scale.linear().domain([50, 100]).range(['#ff0000', '#280000']);
var Fills = {defaultFill: '#ddd'};
var Data = {};
var countries = Datamap.prototype.worldTopo.objects.world.geometries;
for(var i = 0; i < newVal.length; i++) {
for (var j = 0; j < countries.length; j++) {
if(countries[j].properties.name == newVal[i].Country) {
Fills[countries[j].id] = colorScale(newVal[i]['Stability Index']);
Data[countries[j].id] = { fillKey : countries[j].id};
}
}
}
var map = new Datamap({
element: containerid,
responsive: true,
projection: 'mercator',
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([0, padding])
.scale(105)
.translate([element.offsetWidth / 2, element.offsetHeight / 2 - 70]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
},
fills: Fills,
data: Data
})
d3.select(window).on('resize', function() {
map.resize();
});
})
}
}
})
Here's my angular controller for the template:
app.controller('CountryCtrl', ['$scope', '$http', function($scope, $http) {
$scope.countriesData = [
{'Country': 'Australia', 'Stability Index':'85'},
{'Country':'United States of America', 'Stability Index':'90'},
{'Country':'Russia', 'Stability Index':'70'},
{'Country':'India', 'Stability Index':'84.2'},
{'Country':'China', 'Stability Index':'50'}
]
}]);
Here's the HTML template:
<div class="row" id="world-map">
<div stability-map data="countriesData" id="world-map-container">
</div>
</div>
Here is the screenshot when the page is loaded first:
And the empty container after I come back to the page after navigating from some other template of the website.
Any idea what's happening?

Answer 1

the map doesnt get rendered again, because the function is only run once, when the code is first executed. I suggest you wrap your creation of the map inside a function and call that function every time you load the page (from the controller).
$scope.renderMap = function() {
var map = new Datamap({
element: containerid,
responsive: true,
projection: 'mercator',
setProjection: function(element) {
var projection = d3.geo.mercator()
.center([0, padding])
.scale(105)
.translate([element.offsetWidth / 2, element.offsetHeight / 2 - 70]);
var path = d3.geo.path()
.projection(projection);
return {path: path, projection: projection};
},
fills: Fills,
data: Data
})
}
The code you will then need to render the map is the following:
$scope.renderMap()
I hope this helps.
xoxo

Answer 2

I found the answer to this. You have to put your variables inside your link function. This means moving
var containerid = document.getElementById('world-map-container');
var margin = 20,
padding = 50,
width = containerid.offsetWidth - margin;
height = containerid.offsetHeight - margin;
right inside your link function. This solved the problem for me.