Angular scope not updating

Question

I'm having a problem getting angular to push a new series onto chartConfig.series using getCurveData(curve) and seeing the change reflected in the UI. The data does get pushed into the list (i can see that in debug) but the change is not reflected in the UI. However, if I click on the button linked to addSeries() then a series is added and displayed on the UI. I'm very new to angular and am definitely missing something basic here. Below are my form and my app. Any help would be greatly appreciated. thanks!

<form role="form" ng-submit="getCurveData(curve)" ng-controller="myctrl">
    <div class="col-xs-2">
        <label for="curveName">Curve Type</label>
        <select class="form-control" ng-model="curve.type">
            <option>Hpi</option>
            <option>Unemployment</option>
            <option>Credit Availability</option>
        </select>
    </div>
    <div class="col-xs-2">
        <label for="curveDate">Base Date</label>
        <input type="text" class="form-control" ng-model="curve.date">
    </div>
    <div class="col-xs-3">
        <label for="frequency">Frequency</label>
        <select class="form-control" id="frequency" ng-model="curve.frequency">
        <option>Daily</option>
        <option>Monthly</option>
        <option>Yearly</option>
        </select>
    </div>
    <div class="col-xs-3">
        <label for="source">Source</label>
        <select class="form-control" id="source" ng-model="curve.source">
            <option>Credit Committee</option>
            <option>Moodys</option>
            <option>S&amp;P</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Javascript:

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope, $http) {

$scope.getCurveData = function (curve) {    
    $http.get('MacroCurveService/' + curve.source + '/' + curve.type + '/' + curve.date + '/' + curve.frequency).success(function(curveData) {
        $scope.chartConfig.series.push({
            data: curveData.values
        });     
    });         
};

$scope.addPoints = function () {
    var seriesArray = $scope.chartConfig.series
    var rndIdx = Math.floor(Math.random() * seriesArray.length);
    seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20])
};

$scope.addSeries = function () {
    var rnd = []
    for (var i = 0; i < 10; i++) {
        rnd.push(Math.floor(Math.random() * 20) + 1)
    }
    $scope.chartConfig.series.push({
        data: rnd
    });
};

$scope.removeRandomSeries = function () {
    var seriesArray = $scope.chartConfig.series
    var rndIdx = Math.floor(Math.random() * seriesArray.length);
    seriesArray.splice(rndIdx, 1)
};

$scope.toggleLoading = function () {
    this.chartConfig.loading = !this.chartConfig.loading
};

$scope.chartConfig = {
    options: {
        chart: {
            type: 'line',
            zoomType: 'x', backgroundColor:'rgba(255, 255, 255, 0.1)'
        }
    },
    series: [{
        /* data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10] */
        data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10]
    }],
    title: {
        text: 'Hello'
    },
    xAxis: {currentMin: 0, currentMax: 10, minRange: 1},
    loading: false
};

});

And if I surround the getCurveData call in an apply statement like follows then i'm getting a "Error: $digest already in progress"

$scope.getCurveData = function (curve) {    
    $http.get('MacroCurveService/' + curve.source + '/' + curve.type + '/' + curve.date + '/' + curve.frequency).success(function(curveData) {
        $scope.$apply(function () {
            $scope.chartConfig.series.push({
                data: curveData.values
            }); 
        });
    });         
};

Answer 1

I had declared the controller twice, once on the form and once in a div above. Removing it from the form did the trick.

Answer 2

The documentation for $http says:

 The response object has these properties:

    data – {string|Object} – The response body transformed with the transform functions.
    status – {number} – HTTP status code of the response.
    headers – {function([headerName])} – Header getter function.
    config – {Object} – The configuration object that was used to generate the request.

Hence, I think the success function should read:

$scope.getCurveData = function (curve) {    
  $http.get('MacroCurveService/' + curve.source + '/' + curve.type + '/' + curve.date + '/' + curve.frequency).success(function(curveData) {
    $scope.chartConfig.series.push({
        data: curveData.data.values
    });     
  });         
};