Unable to edit Select Options using ng-model with AngularJS

Question

I have a select that calls the options using ng-model. It works perfectly, but now I'm trying to edit the list of options from the array using an input with the model options and it doesn't work.

Long story short, the input with show the options as coma separated values, but once I edit the list, the select will break. You can see what I mean in this Plunker.

The js looks like this:

var Select = function($scope) {

$scope.options =
[
    "I live here!",
    "By Boat",
    "By Car",
    "By Plane",
    "By Bike",
    "By Bus",
    "Hitchhiking",
    "Other"
];      

$scope.form = {type : $scope.options[0]}; 
};

And the html:

 <form class="col-md-12" ng-controller="Select">

 <select class="form-control" ng-model="form.type" ng-options="opt for opt in options"> 
 </select>

 <textarea ng-model="options" class="form-control"></textarea>

 </form>

What am I missing?

Answer 1

The problem is once you edit the model, it's no longer an array and is stored as a string. Add <p> {{ options }} </p> below the text box and you'll see what happens. What you need to do is to parse the string into an array, and you can do this by writing a method tied to ng-change or a directive.