AngularJS scope HELP WANTED

by 47ronin

HTML

<script src="https://rawgit.com/gevgeny/ui-highcharts/master/samples/jsfiddle-scripts.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

    <!--This scripts are necessary only for local running, jsfiddle version uses resources. -->
    <script src="../../bower_components/jquery/dist/jquery.js"></script>
    <script src="../../bower_components/angular/angular.js"></script>
    <script src="../../bower_components/highstock-release/highstock.src.js"></script>
    <script src="../../dist/ui-highcharts.js"></script>
    <script src="demo.js"></script>

    <div ng-app="myApp" ng-controller="MainCtrl">
        <ui-chart series="data" options="options" title="Example company stock">
            <y-axis title="foo">
                <labels>
                    <span>{{ value }} dunno what this is for</span>
                </labels>
            </y-axis>
            <y-axis opposite title="Value">
                <labels>
                    <span>${{ value }}</span>
                </labels>
            </y-axis>
            <tooltip use-html>
                <span ng-show="series.name == 'Value'">{{ x }}: ${{ y }}</span>
            </tooltip>
        </ui-chart>
        <p>{{ iWishThisCouldBeGlobal }}</p>
    </div>
</body>
</html>

JavaScript

angular.module('myApp', ['ui-highcharts'])
  .controller('MainCtrl', function ($http, $scope) {
    $scope.loadData = function(){
      return $http.jsonp('http://dev.markitondemand.com/Api/v2/InteractiveChart/jsonp?jsoncallback=JSON_CALLBACK&parameters=%7B%22Normalized%22%3Afalse%2C%22NumberOfDays%22%3A30%2C%22DataPeriod%22%3A%22Day%22%2C%22Elements%22%3A%5B%7B%22Symbol%22%3A%22AAPL%22%2C%22Type%22%3A%22price%22%2C%22Params%22%3A%5B%22c%22%5D%7D%5D%7D')
      .then(function(res){
        $scope.iWishThisCouldBeGlobal = res;
        return res;
      });
    };
    $scope.rawData = $scope.loadData();
    console.log($scope.rawData);
    console.log($scope.iWishThisCouldBeGlobal); // Undefined. Argh! I just need the objects inside to go into $scope.data
    // What I want is inside $scope.rawData.$$state.value.data, which I can't get to (undefined)!
      
      // UI Highcharts refuses to use the .data and .options if they're inside another scope, so I'm stuck keeping them outside any other functions
      
    $scope.data = [{
    // data : I WANT SOME $scope.rawData.stuff HERE BUT I JUST GET AN INACCESSIBLE PROMISE
        name : 'Value',
        type : 'line',
        data : [49.90, 71.50, 106.40, 129.20, 144.00, 176.00, 135.60, 148.50, 216.40, 194.10, 95.60, 54.40],
        yAxis : 1
    }];

    $scope.options = {
        chart: {
            spacing: 40,
            height: 360
        },
        legend : {
            enabled : false
        },
        xAxis : [{
            categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }]
    };
});