While [Krzysztof's suggestion][Krzysztof] was helpful, I couldn't quite get the binding to work with `ng-list` because the `ng-list` will always convert the array of objects into an  array of strings, thus overriding any objects I had on scope.

In this case, the simplest thing to do was to upgrade from ng-list to something with full object support like most tagging libraries:

* [ngTagsInput][ngTagsInput]
* [angular-tags][angular-tags]
* [bootstrap-tagsinput][bootstrap-tagsinput]

I Implemented ngTagsInput like this:

**HTML**:



    <tags-input ng-model="arrayObjects" display-property="text"></tags-input>

**JavaScript**:



    $scope.arrayObjects = [
      { "text": "one"   , "selected": false },
      { "text": "two"   , "selected": false },
      { "text": "three" , "selected": false }
    ];

This way each object is given it's own element where the text property is displayed and they are all formatted together to live inside of an input.  Changing one object just updates that single element

### [Demo in Pluner][plunk]



[Krzysztof]: https://stackoverflow.com/a/24966775/1366033

[angular-tags]: http://decipherinc.github.io/angular-tags/

[ngTagsInput]: http://mbenford.github.io/ngTagsInput/
[bootstrap-tagsinput]: http://timschlechter.github.io/bootstrap-tagsinput/examples/#angular

[plunk]: http://plnkr.co/edit/ruzBkQWeYaYtRhxDRyqg?p=preview

How can I convert between a delimited string and an array of **objects** with data binding? 

[`ng-list`][ng-list] will work with an array of strings.  But I have an array of objects, in which I would like to delimit the text property so the text in the array can be editable.

**Works with Array of Strings**:



    $scope.arrayStrings = ["one", "two", "three"];



    <textarea ng-model="arrayStrings" ng-list="&#10;" ></textarea>

**How can I get this to work with objects**:



    $scope.arrayObjects = [{
      text: "one",
      selected: true
    }, {
      text: "two",
      selected: true
    }, {
      text: "three",
      selected: true
    }];



    <textarea ng-model="arrayObjects" ng-list="&#10; | text" ></textarea>

### [Here's a demo in plunker][plunk 1]


---

One possible idea I had was to use ng-list on the array of strings and then map that to the array of objects.  The use a `$watch` to update the object array anytime the string array changed.  However, this still falls short because it will overwrite any other properties on the object every time the array updates. (Demo in previous plunker revision)



    $scope.$watch('arrayStrings', function() {
      $scope.arrayObjects = $scope.arrayStrings.map(function(s){
        return {
          text: s,
          selected: true
        }
      });
    })

---

### Update:

There still seem to be issues when using `ng-list` even when using [Krzysztof's suggestion][Krzysztof]:

    toString: function() { return s }

Overriding the `toString` method helps the set of objects when initially displayed, but as soon as you type anything, `ng-list` converts the set of objects back into an array of strings because at that point `toString` has not come into play. 

To clarify what I'm trying to do.  I really want a list of objects, with editable titles, that can also be selected.  I'd like to preserve selections even when the title has changed or items have been added.

### [Here's another plunker to demonstrate][plunk 2]

![screenshot][screenshot]

[ng-list]: https://docs.angularjs.org/api/ng/directive/ngList
[plunk 1]: http://plnkr.co/edit/ZudJcIak5sAWuiq3b1Hu?p=preview
[plunk 2]: http://plnkr.co/edit/0Q2jVYIU4dEc1GZ4EaPY?p=preview

[screenshot]: http://i.imgur.com/cWRGzzC.gif
[Krzysztof]: https://stackoverflow.com/a/24966775/1366033