AngularJS dropdown list loses content after item selected
angularjs, asp.net-web-api, c#, http, javascript
Solution
Change `data-ng-model="carSet"` to something different e.g. `data-ng-model="carChosenColor"` and it will work fine.
Then in `$scope.carChosenColor` will store the chosen value.
Problem
I have an ASP.Net WebAPI project that I run from VS that supplies data in the form of JSON to my Angular project. I get the data from the webapi via an $http.get call like so: ``` function CarController($scope, $http) { $http.get('http://localhost:1246/api/values') .success(function (data, status, headers, config) { $scope.carSet = data; }) .error(function (data, status, headers, config) { $scope.error = status; alert("You be broken buddy!"); }); } ``` Then the carSet is bound in the html like this: ``` <!DOCTYPE html> <html data-ng-app=""> <head> <title></title> <script src="scripts/controllers/controller.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> </head> <body> <div data-ng-controller="CarController"> <select data-ng-model="carSet" onchange="DataChanged()" data-ng-options="c.Color for c in carSet"></select> </div> </body> </html> ``` Everything works great. I get my list. The first entry is blank and that is ok for now. THE PROBLEM: When I select any of the items in the dropdown list, the entire list is cleared out and there are no more items to select from?? Whaaaaat! At this point I am clearly frustrated. This behavior only happens when I use the $http mechanism to retrieve data from the WebApi. It does not happen if I use the $http.get to retrieve json data from a file or other locally created data stores. I just need a simple dropdown list that will allow me to use it's selected values for filtering other data (another db call.) I would show you pics.. but this is my very first post.. and well.... I can't. Any help is greatly appreciated. Thanks.