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
            }); 
        });
    });         
};

right inside ng-model. I dont believe you have to explicitly define it? The data gets pushed into the list just fine but the UI is not updated. — bjoern
– bjoern, Commented Nov 15, 2013 at 23:00

bjoern · Accepted Answer · 2013-11-16 18:25:44Z

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.

answered Nov 16, 2013 at 18:25

bjoern

1,0193 gold badges15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

musically_ut · Accepted Answer · 2013-11-15 23:14:25Z

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
    });     
  });         
};

Collectives™ on Stack Overflow

Angular scope not updating

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related