Passing AngularJS scope to a JS Chart

Question

I am trying to use an Array from a controller which is within a $scope globally declared in that controller within some Javascript in my html file. Is this possible to do? I have tried to implement $rootScope without much success not sure if there is an issue with the implementation but the $rootScope gets called first and I get undefined in the console and then the controller sets the value after.

This is my controller

function HomeCtrl($rootScope, $scope, $http, $filter){
    $rootScope.temp1 = [[gd(2016, 6, 1), 82], [gd(2016, 6, 7), 23], [gd(2016, 6, 14), 66]];
}

This is my JS placed within my HTML

    $(document).ready(function($rootScope) {

    console.log($rootScope.temp1);

    var data1 = $rootScope.temp1;

    var data2 = [
      [gd(2016, 6, 1), 82],
      [gd(2016, 6, 7), 23],
      [gd(2016, 6, 14), 66],
      [gd(2016, 6, 21), 9],
      [gd(2016, 6, 28), 119],
      [gd(2016, 6, 29), 6],
      [gd(2016, 6, 30), 9]
    ];

    var data3 = [
      [gd(2016, 6, 1), 822],
      [gd(2016, 6, 7), 232],
      [gd(2016, 6, 14), 626],
      [gd(2016, 6, 21), 92],
      [gd(2016, 6, 28), 1219],
      [gd(2016, 6, 29), 62],
      [gd(2016, 6, 30), 92]
    ];
    $("#canvas_dahs").length && $.plot($("#canvas_dahs"), [
      data1, data2, data3
    ], {
      series: {
        lines: {
          show: false,
          fill: true
        },
        splines: {
          show: true,
          tension: 0.4,
          lineWidth: 1,
          fill: 0.4
        },
        points: {
          radius: 0,
          show: true
        },
        shadowSize: 2
      },
      grid: {
        verticalLines: true,
        hoverable: true,
        clickable: true,
        tickColor: "#d5d5d5",
        borderWidth: 1,
        color: '#fff'
      },
      colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
      xaxis: {
        tickColor: "rgba(51, 51, 51, 0.06)",
        mode: "time",
        tickSize: [1, "day"],
        //tickLength: 10,
        axisLabel: "Date",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
      },
      yaxis: {
        ticks: 8,
        tickColor: "rgba(51, 51, 51, 0.06)",
      },
      tooltip: false

    });

    function gd(year, month, day) {
      return new Date(year, month - 1, day).getTime();
    }
  });

Answer 1

We cannot pass AngularJs variables into a standalone JS chart library and need to use a chart that connects directly with the call. I found two of these and practically implemented angular-chart.js which @Nemeros suggested.

The other was Angular-nvD3 which I tested and it worked successfully.