AngularJS scope HELP WANTED

HTML

<script src="https://rawgit.com/gevgeny/ui-highcharts/master/samples/jsfiddle-scripts.js"></script>
<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>{{ rawdata }}</p>
    </div>
</body>

JavaScript

angular.module('myApp', ['ui-highcharts'])
    .factory('openChannel', function ($http, $q) {
    return {
        grab: function () {
            var deferred = $q.defer();
            $http.jsonp.apply(null, arguments)
                .success(deferred.resolve)
                .error(deferred.resolve);
            return deferred.promise;
        }
    };
})
    .controller('MainCtrl', function ($http, $scope, openChannel) {
    openChannel.grab('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 (stuff) {
        $scope.rawData = stuff;
        console.log('Inside this function, value of $scope.rawData:');
        console.log($scope.rawData);
    });
        
    // Goal is to use $scope.rawData objects to populate $scope.data array. But it's not working!
    // CHALLENGE: $scope.data and $scope.options cannot be moved into function above --it breaks Highcharts so therefore they have to stay in the "outermost" scope.
        
    console.log('Outside the function, the value is lost! $scope.rawData:');
    console.log($scope.rawData);
    $scope.data = [{
        name: 'Value',
        type: 'line',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        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']
        }]
    };
});