Angular -nvd3: force date range on the x axis

Question

I use angular -nvd3 directives ( http://cmaurer.imtqy.com/angularjs-nvd3-directives/line.chart.html )

HTML in the template:

<nvd3-line-chart  
  data="graphData"  
  id="exampleId"  
  interactive="true"  
  tooltips="true"  
  showXAxis="true"  
  showYAxis="true"  
  yAxisLabel="Riders"       
  margin="{left:75,top:20,bottom:45,right:30}"  
  xAxisTickFormat="xAxisTickFormat"  
  xAxisTickValues="xAxisTicks"  
  x="xFunction()"  
  color="routeColour()"  
  legendColor="routeColour()"  
  showLegend="true"  
  >  
  <svg></svg>  
</nvd3-line-chart>  

js in the controller (the legend function is omitted here, but this works):

  $scope.graphData =[{  
    key: "R1",  
    values: [["2014-1-1", 200], ["2014-1-2", 250]]  
  },  
  {  
    key: "R2",  
    values: [["2014-1-1", 300], ["2014-1-2", 350]]  
  }]  

  $scope.xAxisTicks = function(){  
    return [new Date('2013-12-31'), new Date('2014-1-1'), new Date('2014-1-2'), new Date('2014-1-3')];  
  }  

  $scope.xAxisTickFormat = function(d){  
    if((typeof d)=="number")  
      return d3.time.format('%Y-%m-%d')(moment.unix((d/1000)).toDate());  
    else  
      return d3.time.format('%Y-%m-%d')(d);  
  }  

  $scope.xFunction = function(){  
    return function(d){  
      return d3.time.format("%Y-%m-%d").parse(d[0]);           
    };  
  }  

The graph is displayed correctly, except that the x axis does not extend over the range December 31 - January 3, as expected. The X axis starts on January 1 and ends on January 2. I also tried this with forcex, but did not work. Any ideas would be appreciated. Thank you