AngularJS - JSON string to select

Beginner in AngularJS. I have a JSON string that has only dates which needs to be populated in html select. Below is what I tried.

JSON string would look like

[{"Dates":"04/10/2015"},{"Dates":"04/03/2015"},{"Dates":"02/20/2015"},{"Dates":"02/13/2015"},]

My JS would look like

<script>
    var app = angular.module('myApp', []);
    app.controller('dvDates', function ($scope, $http) {
        $scope.Dates = [];

        $http.post("Basics1.aspx/GetDates", { data: {} })
        .success(function (data, status, headers, config) {
            var results = JSON.parse(data.d);
            $scope.Dates = results;
        })
        .error(function (data,status,headers,config) { });

    });
</script>

HTML Code:

<div ng-app="myApp" ng-controller="dvDates">
    <select ng-model="Dates" ng-options="item.Dates as item.Dates for item in Dates">
        <option value=""> Select From Date</option>
    </select>
</div>

The result is as below. Dropdownlist is shown properly.

<select class="ng-pristine ng-valid ng-touched" ng-options="item.Dates as item.Dates for item in Dates" ng-model="Dates">
    <option value=""> Select From Date</option>
    <option value="0" label="04/10/2015">04/10/2015</option>
    <option value="1" label="04/03/2015">04/03/2015</option>
    <option value="2" label="02/20/2015">02/20/2015</option>
    <option value="3" label="02/13/2015">02/13/2015</option>
    <option value="4" label="02/06/2015">02/06/2015</option>
    <option value="5" label="01/30/2015">01/30/2015</option>
</select>

But when I select any value for this, the HTML changes as below and all the values wipes out.

<select class="ng-valid ng-dirty ng-touched" ng-options="item.Dates as item.Dates for item in AsOf" ng-model="Dates">
    <option value="? string:01/30/2015 ?"></option>
    <option value=""> Select From Date</option>
</select>

Please let me know what I'm doing wrong. The issue happens only with Dates. When I try with normal string to populate in Select, everything works as expected.

Solution

You need to change your model in select from

ng-model="Dates"

for somthign different ie

ng-model="selected.Date"

otherwise every time when you choose something from your select box, you overwrite your $scope.Dates model

angular.module("app", [])
  .controller('homeCtrl', function($scope) {


    $scope.Dates = [{
      "Dates": "04/10/2015"
    }, {
      "Dates": "04/03/2015"
    }, {
      "Dates": "02/20/2015"
    }, {
      "Dates": "02/13/2015"
    }];

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="homeCtrl">
    <select ng-model="selected.Date" ng-options="item.Dates as item.Dates for item in Dates">
      <option value="">Select From Date</option>
    </select>

    Selected : {{selected.Date}}
  </div>
</body>