How to create Master-Detail charts in highcharts-ng

Question

I am using highcharts-ng for creating dynamic charts in one of our AngularJS application.

highcharts-ng is working good for simple chart. But I am unable to figure out a way to use Highchart's Master-Detail Chart through highcharts-ng module.

Below is my code which is written by referring Master-Detail chart demo on highcharts website. It renders only master chart (not correctly though) but do not renders the detail chart as there is no way to pass subchart to a parent chart in highcharts-ng module.

Please have a look and suggest if there is any possibility to create master-detail charts by using highcharts-ng module. Your help will be highly appreciated.

JSFiddle : jsfiddle.net/HB7LU/8420/

HTML:

<div ng-controller="ChartCtrl" ng-init="createMasterChart();">
  <div id="container">
    <highchart id="spectrum-detail" config="spectrumDetailChart"></highchart>
     <highchart id="spectrum-master" config="spectrumMasterChart"></highchart>
  </div>
</div>

CSS:

 #container{position:relative;}
 #spectrum-master{position:'absolute',top:300,height:100,width:'100%'};

Script:

  // create the detail chart
  $scope.createDetailChart = function(masterChart) {
    // prepare the detail chart
    var detailData = [],
    detailStart = Date.UTC(2008, 7, 1);

    $.each(masterChart.series[0].data, function () {
      if (this.x >= detailStart) {
    detailData.push(this.y);
      }
    });

    // create a detail chart referenced by a global variable
    $scope.spectrumDetailChart = {
      chart: {
    marginBottom: 120,
    reflow: false,
    marginLeft: 50,
    marginRight: 20,
    style: {
      position: 'absolute'
    }
      },
      credits: {
    enabled: false
      },
      title: {
    text: 'Historical USD to EUR Exchange Rate'
      },
      subtitle: {
    text: 'Select an area by dragging across the lower chart'
      },
      xAxis: {
    type: 'datetime'
      },
      yAxis: {
    title: {
      text: null
    },
    maxZoom: 0.1
      },
      tooltip: {
    formatter: function () {
      var point = this.points[0];
      return '<b>' + point.series.name + '</b><br/>' +
          Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
          '1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
    },
    shared: true
      },
      legend: {
    enabled: false
      },
      plotOptions: {
    series: {
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: true,
            radius: 3
          }
        }
      }
    }
      },
      series: [{
    name: 'USD to EUR',
    pointStart: detailStart,
    pointInterval: 24 * 3600 * 1000,
    data: detailData
      }],

      exporting: {
    enabled: false
      }
    };
  };

  // create the master chart
  $scope.createMasterChart = function () {
    $scope.spectrumMasterChart = {
      chart: {
    reflow: false,
    borderWidth: 0,
    backgroundColor: null,
    marginLeft: 50,
    marginRight: 20,
    zoomType: 'x',
    events: {

      // listen to the selection event on the master chart to update the
      // extremes of the detail chart
      selection: function (event) {
        var extremesObject = event.xAxis[0],
            min = extremesObject.min,
            max = extremesObject.max,
            detailData = [],
            xAxis = this.xAxis[0];

        // reverse engineer the last part of the data
        $.each(this.series[0].data, function () {
          if (this.x > min && this.x < max) {
            detailData.push([this.x, this.y]);
          }
        });

        // move the plot bands to reflect the new detail span
        xAxis.removePlotBand('mask-before');
        xAxis.addPlotBand({
          id: 'mask-before',
          from: Date.UTC(2006, 0, 1),
          to: min,
          color: 'rgba(0, 0, 0, 0.2)'
        });

        xAxis.removePlotBand('mask-after');
        xAxis.addPlotBand({
          id: 'mask-after',
          from: max,
          to: Date.UTC(2008, 11, 31),
          color: 'rgba(0, 0, 0, 0.2)'
        });


        detailChart.series[0].setData(detailData);

        return false;
      }
    }
      },
      title: {
    text: null
      },
      xAxis: {
    type: 'datetime',
    showLastTickLabel: true,
    maxZoom: 14 * 24 * 3600000, // fourteen days
    plotBands: [
      {
        id: 'mask-before',
        from: Date.UTC(2006, 0, 1),
        to: Date.UTC(2008, 7, 1),
        color: 'rgba(0, 0, 0, 0.2)'
      }
    ],
    title: {
      text: null
    }
      },
      yAxis: {
    gridLineWidth: 0,
    labels: {
      enabled: false
    },
    title: {
      text: null
    },
    min: 0.6,
    showFirstLabel: false
      },
      tooltip: {
    formatter: function () {
      return false;
    }
      },
      legend: {
    enabled: false
      },
      credits: {
    enabled: false
      },
      plotOptions: {
    series: {
      fillColor: {
        linearGradient: [0, 0, 0, 70],
        stops: [
          [0, Highcharts.getOptions().colors[0]],
          [1, 'rgba(255,255,255,0)']
        ]
      },
      lineWidth: 1,
      marker: {
        enabled: false
      },
      shadow: false,
      states: {
        hover: {
          lineWidth: 1
        }
      },
      enableMouseTracking: false
    }
      },

      series: [
    {
      type: 'area',
      name: 'USD to EUR',
      pointInterval: 24 * 3600 * 1000,
      pointStart: Date.UTC(2006, 0, 1),
      data: data
    }
      ],

      exporting: {
    enabled: false
      }
    };
    $scope.createDetailChart($scope.spectrumMasterChart);
  };