How to solve "TypeError: Cannot read property 'Chart' of undefined"?

Question

I am working on an Angular(1.5.8) project and use bower installed highcharts-ng github link

Added highcharts-ng as:

angular.module('myapp',
      ['highcharts-ng',
        // more modules here..
      ])

In my html file, i use below:

<div class="row">
    <highchart id="chart1" config="chartConfig"></highchart>
</div>

In my controller file: DashboardController.$inject = ['$scope', 'Principal', 'LoginService', '$state'];

function DashboardController ($scope, Principal, LoginService, $state) {
    $scope.chartConfig ={
       ....// configuration details
    };
}();

I put the <script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script> into index.html

Unfortunately, I got such error:

angular.js:13920 TypeError: Cannot read property 'Chart' of undefined
    at initChart (highcharts-ng.js:334)
    at linkWithHighcharts (highcharts-ng.js:349)
    at highchartsCb (highcharts-ng.js:463)
    at processQueue (angular.js:16383)
    at angular.js:16399
    at Scope.$eval (angular.js:17682)
    at Scope.$digest (angular.js:17495)
    at Scope.$apply (angular.js:17790)
    at done (angular.js:11831)
    at completeRequest (angular.js:12033)

Can anyone shed some light on this please?

Details of chartConfig, it is a copy from https://github.com/pablojim/highcharts-ng which I use it for testing highcharts works or not :

  function DashboardController ($scope) {
        //This is not a highcharts object. It just looks a little like one!
        $scope.chartConfig = {

            options: {
                //This is the Main Highcharts chart config. Any Highchart options are valid here.
                //will be overriden by values specified below.
                chart: {
                    type: 'bar'
                },
                tooltip: {
                    style: {
                        padding: 10,
                        fontWeight: 'bold'
                    }
                }
            },
            //The below properties are watched separately for changes.

            //Series object (optional) - a list of series using normal Highcharts series options.
            series: [{
                data: [10, 15, 12, 8, 7]
            }],
            //Title configuration (optional)
            title: {
                text: 'Hello'
            },
            //Boolean to control showing loading status on chart (optional)
            //Could be a string if you want to show specific loading text.
            loading: false,
            //Configuration for the xAxis (optional). Currently only one x axis can be dynamically controlled.
            //properties currentMin and currentMax provided 2-way binding to the chart's maximum and minimum
            xAxis: {
                currentMin: 0,
                currentMax: 20,
                title: {text: 'values'}
            },
            //Whether to use Highstocks instead of Highcharts (optional). Defaults to false.
            useHighStocks: false,
            //size (optional) if left out the chart will default to size of the div or something sensible.
            size: {
                width: 400,
                height: 300
            },
            //function (optional)
            // func: function (chart) {
            //     //setup some logic for the chart
            // }
        };
    }

Answer 1

Include,

<script src="http://code.highcharts.com/stock/highstock.src.js"></script> 

or

<script src="http://code.highcharts.com/highcharts.src.js"></script>

as explained in the git page.