AngularJS function fails update with json string value

Question

I have dropdown menu created with ng-repeat , however if the json is string, my function will fail. But it works just fine if its integer.

HERE IS EXAMPLE

As you guys can see, chart will upload just fine with year select dropdown. I believe because data is integer for ex. "year": 2011

I also have quarter dropdown. with "quarter": "1" , this will fail to update, however if I have "quarter": 2 which works just fine.

<select class="YearSelector" ng-model="selectedyear" ng-change="sampleDropDown()">
      <option ng-repeat="year in filterOptions.stores |  unique: 'year'">
        {{ year.year }}</option>
    </select>
    Quarter:
    <select class="QuarterSelector" ng-model="$parent.quarter" ng-change="sampleDropDown()">
      <option ng-repeat="quarter in filterOptions.stores | unique: 'quarter'">
        {{ quarter.quarter }}</option>
    </select>

My function:

 $scope.sampleDropDown = function(){
myChart.data = getData(data, $scope.selectedyear, $scope.quarter);
myChart.draw(500);

}

Answer 1

I think @charlietfl means, you should just convert your strings to numbers.

 $scope.sampleDropDown = function(){
    myChart.data = getData(data,  parseInt($scope.selectedyear), parseInt($scope.quarter));
    myChart.draw(500);
  }

IMO, the error seems more to do with myChart.draw than Angular.

Answer 2

Looks like your HTML markup causes option values end up with a leading carriage return. You can see it if you add a console.log like the following:

function getData(data, year, quarter) {
  console.log("year value '" + year + "'") ;

In the console you'll see:

"year value '
        2011'"

If you change your HTML option markup to be all on one line I think you'll be good-to-go, eg for the quarter:

<option ng-repeat ...>{{ quarter.quarter }}</option>

Also, you could use Angular's ngOptions instead of the option+ng-repeat combination.