title: Convert delimited string and an array of objects
body: <p>How can I convert between a delimited string and an array of <strong>objects</strong> with data binding?</p>
  <p><a href="https://docs.angularjs.org/api/ng/directive/ngList" rel="nofollow noreferrer"><code>ng-list</code></a> 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.</p>
  <p><strong>Works with Array of Strings</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>$scope.arrayStrings = [&quot;one&quot;, &quot;two&quot;, &quot;three&quot;];
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;textarea ng-model=&quot;arrayStrings&quot; ng-list=&quot;&amp;#10;&quot; &gt;&lt;/textarea&gt;
  </code></pre>
  <p><strong>How can I get this to work with objects</strong>:</p>
  <pre class="lang-js prettyprint-override"><code>$scope.arrayObjects = [{
    text: &quot;one&quot;,
    selected: true
  }, {
    text: &quot;two&quot;,
    selected: true
  }, {
    text: &quot;three&quot;,
    selected: true
  }];
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;textarea ng-model=&quot;arrayObjects&quot; ng-list=&quot;&amp;#10; | text&quot; &gt;&lt;/textarea&gt;
  </code></pre>
  <h3><a href="http://plnkr.co/edit/ZudJcIak5sAWuiq3b1Hu?p=preview" rel="nofollow noreferrer">Here's a demo in plunker</a></h3>
  <hr />
  <p>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 <code>$watch</code> 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)</p>
  <pre class="lang-js prettyprint-override"><code>$scope.$watch('arrayStrings', function() {
    $scope.arrayObjects = $scope.arrayStrings.map(function(s){
      return {
        text: s,
        selected: true
      }
    });
  })
  </code></pre>
  <hr />
  <h3>Update:</h3>
  <p>There still seem to be issues when using <code>ng-list</code> even when using <a href="https://stackoverflow.com/a/24966775/1366033">Krzysztof's suggestion</a>:</p>
  <pre><code>toString: function() { return s }
  </code></pre>
  <p>Overriding the <code>toString</code> method helps the set of objects when initially displayed, but as soon as you type anything, <code>ng-list</code> converts the set of objects back into an array of strings because at that point <code>toString</code> has not come into play.</p>
  <p>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.</p>
  <h3><a href="http://plnkr.co/edit/0Q2jVYIU4dEc1GZ4EaPY?p=preview" rel="nofollow noreferrer">Here's another plunker to demonstrate</a></h3>
  <p><img src="https://i.imgur.com/cWRGzzC.gif" alt="screenshot" /></p>