angularjs - scope changes but function is not fired - angularjs

Question

I'm working on an angular app which needs to display some data as a chart.
The library i'm using in nvd3.js.
The chart is a directive, and the code that creates the chart is the following:
angular.module('charts', []).factory('d3', [
function() {
return d3;
}
]).factory('nv', [
function() {
return nv;
}
]).directive('hgCharts', [
'$timeout', 'd3', 'nv', function($timeout, d3, nv) {
var linkFunction;
linkFunction = function(scope, element, attr) {
var chart, chartCreated, containerHeight, containerWidth, createChart, date, svg, xScale;
containerWidth = element[0].offsetWidth;
containerHeight = element[0].offsetHeight;
date = new Date;
svg = element.find('svg');
chart = void 0;
xScale = d3.time.scale().domain([date, date]).nice(d3.time.day).range([0, containerWidth - 50]);
createChart = function() {
debugger;
chart = nv.models.multiChart();
chart.options({
showLegend: true,
duration: 0,
margin: {
'left': 20,
'right': 30,
'top': 50,
'bottom': 50
},
yDomain1: [0, 30],
showXAxis: false,
showMinMax: false,
useVoronoi: true
});
chart.xAxis.scale(xScale).orient('bottom').ticks(3).duration(0).tickFormat(d3.time.format('%H:%M'));
chart.yAxis1.orient('left').ticks(7).duration(0);
chart.tooltip.enabled(true);
nv.utils.windowResize(function() {
containerWidth = element[0].offsetWidth;
containerHeight = element[0].offsetHeight;
chart.xAxis.range([0, containerWidth - 50]);
chart.update();
return d3.selectAll(".nv-axisMaxMin-x")[0][0].remove();
});
return chart;
};
chartCreated = function() {
console.log("Scope.data is: ", scope.data);
d3.select(svg[0]).attr('width', '100%').attr('height', '100%').datum(scope.data).call(chart);
return d3.selectAll(".nv-axisMaxMin-x")[0][0].remove();
};
scope.$watch(function() {
return scope.data;
}, function() {
if (scope.data) {
console.log("Scope data changed...");
return nv.addGraph(createChart, chartCreated);
}
});
};
return {
restrict: 'E',
scope: {
data: '='
},
template: '<svg></svg>',
link: linkFunction
};
}
]);
In my UI, I have a prev and next button.
Each of the buttons above have a function in the controller to get the right start and end time period using moment.js, and once they have the right times, the call a function.
This it the code for the funciton they call:
var loadChartData;
loadChartData = function(start, end) {
if (!start) {
start = 1467331200000;
}
if (!end) {
end = 1467417599000;
}
return hgChartData.loadData(start, end).then(function(res) {
return $scope.chartData = res;
});
};
The function calls a service to load my data, and returns them as a promise (res), and then creates (or modify) $scope.chartData with the new data.
Debugging this process a lot, I noticed that the problem I've got, is that even if $scope.chartData changes (I have the right result printed on my console), the debugger inside createChart function is never called, and so the chart with my new data is not created.
Am I doing something wrong with the watcher?
Strangely, it works only the first time I click on a button (it doesn't matter if it prev or next), but then it stops (as I said above, scope.chartData changes everytime according to the console messages I print.) The code for next and prev buttons are below:
var requiredDay;
requiredDay = '';
$scope.prevDay = function() {
if (!requiredDay) {
requiredDay = moment(1467377134000);
}
requiredDay = requiredDay.clone().subtract(1, 'day');
console.log("Required data period is: ", requiredDay);
displayRequestedData(requiredDay);
return requiredDay;
};
$scope.nextDay = function() {
if (!requiredDay) {
requiredDay = moment(1467377134000);
}
requiredDay = requiredDay.clone().add(1, 'day');
console.log("Required data period is: ", requiredDay);
displayRequestedData(requiredDay);
return requiredDay;
};
I think the problem is with my watcher, but I can't figure out what i'm doing wrong.
Thanks for any help
EDIT
After debugging this a bit more, I found out that the scope is actually watched, but as soon as I changes to empty array, it's not watched anymore.
I'll explain it a bit better:
scope.data (the scope i'm watching in my directive) is equal to an array of object, and each object has this structure (taken directly from console):
Object{
color:"red"
duration:0
key:"Temperature"
originalKey:"Temperature"
type:"line"
values:Array[10]
yAxis:1
}
Each array inside the previous object look like this:
Object{
series:0
x:1467330307000
y:20
}
what I found is that if my array changes its values (array values are the only thing that changes inside that scope), the scope is updated and the chart re-rendered, but as soon as I have no data for the requested time period, the number of arrays inside my object goes to 0 and then the watcher doesn't work anymore.
I hope this helps a bit more. I'm still having issues try to understand why and how to solve it.
Thanks again