Flot js and Angular Issue

我正在使用流程图来绘制仪表板上的一些点，并且遇到了一些麻烦。

首先，仪表板是有角度的，所以我设置了一个指令来初始化flot，它似乎正在工作。图表加载并绘制可用的第一组数据。当我尝试更新用于生成图形的数据时，问题就出现了。

当我这样做时，数据更新，但只显示前3个点，它不显示结果中的完整数据集-只有前3个图表值。检索到的JSON结果集的长度可以不同(返回的数据基于在其他地方设置的日期值，并由updateStats函数请求)。我需要它做的是，动态地绘制所有数据而不仅仅是数据集中的前几行。

我不知道为什么它会这样做，我已经放弃了把我的头撞在桌子上。如有任何帮助，我将不胜感激。

这是我的代码(请忽略控制台)。我一直在尝试用各种方式调试这个): 指令

.directive('flotChart', function () {
return {
  restrict: 'AE',
  scope: {
    data: '=flotData',
    options: '=flotOptions',
    plothover: '&plotHover',
    plotclick: '&plotClick'
  },
  link: function (scope, element, attr) {
    var plot = $.plot($(element), scope.data, scope.options);
    $(element).bind('plothover', function (event, position, item) {
      scope.plothover( {
        event: event,
        position: position, 
        item: item
      });
    });
    $(element).bind('plotclick', function (event, position, item) {
      scope.plotclick( {
        event: event,
        position: position, 
        item: item
      });
    });
    scope.$watch('data', function (newVal, oldVal) {
      console.log("DATA WATCH");
      plot.setData(newVal);
      plot.draw();
    });
    scope.$watch('options', function (newVal, oldVal) {
      plot = $.plot($(element), scope.data, newVal);
    }, true);
  }
}

})控制器

.controller('DashboardController', ['$scope','$http', function ($scope,$http) {

//删除一段与对话无关的代码

    $scope.plotStatsData = [{data:[[1,500],[2,250],[3,150]], label:'TEST'}];
$scope.init = function() {
   $scope.updateStats(); 
}
    $scope.updateStats = function() {
    $http.post("/admin/dashboard/loaddata",{start_date: $scope.drp_start, end_date: $scope.drp_end}).success(function(response){
        $scope.totals = response.summary;
        //console.log(response.dataset);
        $scope.plotPoints(response.dataset);
    });
};
$scope.plotPoints = function(data) {
    var layer1 = {data:[],label:'Users'};
    var count = 1;
    if (confirm("Clear it?"))
    $scope.plotStatsData = [];
    for (var i=1; i < data.length; i++)
        layer1.data.push([i,parseInt(data[i-1].users)]);
    console.log(layer1);
    $scope.plotStatsData.push(layer1);
}
$scope.plotStatsOptions =  {
    series: {
        lines: {
            show: true,
            lineWidth: 1.5,
            fill: 0.1
        },
        points: {
            show: true
        },
        shadowSize: 0
    },
    grid: {
        labelMargin: 10,
        hoverable: true,
        clickable: true,
        borderWidth: 0
    },
    tooltip: true,
    tooltipOpts: {
      defaultTheme: false,
      content: "View Count: %y"
    },
    colors: ["#b3bcc7"],
    xaxis: {
        tickColor: 'transparent',
        tickDecimals: 0,
        autoscaleMargin: 0,
        font: {
            color: 'rgba(0,0,0,0.4)',
            size: 11
        }
    },
    yaxis: {
        ticks: 4,
        tickDecimals: 0,
        tickColor: "rgba(0,0,0,0.04)",
        font: {
            color: 'rgba(0,0,0,0.4)',
            size: 11
        },
        tickFormatter: function (val, axis) {
            if (val>999) {return (val/1000) + "K";} else {return val;}
        }
    },
    legend : {
        labelBoxBorderColor: 'transparent'
    }
};


}])

HTML

<div flot-chart style="width: 100%; height:250px" 
                                    data-flot-data="plotStatsData"
                                    data-flot-options="plotStatsOptions"
                                ></div>

$scope.plotStatsData = [{data:[[1,500],[2,250],[3,150]], label:'TEST'}]; 

scope.$watch('data', function (newVal, oldVal) {
    console.log("DATA WATCH");
    plot.setData(newVal);
    plot.setupGrid();
    plot.draw();
});

plot.setData(newVal);
plot.draw();

plot = $.plot($(element), newVal, scope.options);