title: AngularJS : Two-way binding between a textarea and ng-repeat-ed inputs
body: <p>I was going to ask this as a question, but I figured out a solution. So at this point, I'm looking for a critique of my solution.</p>
  
  <ol>
  <li><p>I've got a static <code>textarea</code>, and an <code>input</code> with an <code>ng-repeat</code> directive.</p></li>
  <li><p>As the user types a sentence into the <code>textarea</code>, a <code>input</code> is rendered for each word in the sentence.</p></li>
  <li><p>Then if the user updates the text in any <code>input</code>, the corresponding word in the <code>textarea</code> sentence is updated (really the whole sentence is recreated).</p></li>
  </ol>
  
  <p>Demo: <a href="http://plnkr.co/edit/bSjtOK?p=preview" rel="noreferrer">http://plnkr.co/edit/bSjtOK?p=preview</a></p>
  
  <h2>Questions</h2>
  
  <p>Keeping in mind that I'm only 2 weeks into my AngularJS learning:</p>
  
  <ul>
  <li>Did I write this in the "angular" way? </li>
  <li>Is there something I could have done better?</li>
  <li>Am I violating any no-nos?</li>
  </ul>
  
  <h2>Abbreviated Code</h2>
  
  <h3>HTML</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;textarea ng-model="sentence" ng-change="parseSentence()" style="width: 100%; height: 15em;"&gt;&lt;/textarea&gt;
  
  &lt;input type="text" ng-repeat="w in words" ng-model="w.word" ng-change="buildSentance(w)" /&gt;
  </code></pre>
  
  <h3>JavaScript</h3>
  
  <pre class="lang-js prettyprint-override"><code>function WordCtrl($scope, debounce) {
  
      $scope.words = [];
      $scope.sentence = 'Hello there how are you today?';
  
      // this is called when the textarea is changed
      // it splits up the textarea's text and updates $scope.words 
      $scope.parseSentence = function() {
  
          var words = $scope.sentence.split(/\s+/g);
          var wordObjects = [];
  
          for (var i=0;i&lt;words.length;i++) {          
            wordObjects.push({word: words[i]});
          }
  
          if ((words.length == 1) &amp;&amp; (words[0] === '')) {
            $scope.words = [];
          } else {
            $scope.words = wordObjects;
          }
  
      };
  
      $scope.parseSentenceDebounced = debounce($scope.parseSentence, 1000, false);
  
      $scope.buildSentance = function(w) {
  
          var words = [];
  
          for (var i=0;i&lt;$scope.words.length;i++) {
            var word = $scope.words[i].word;
            if (word.replace(/\s+/g,'') !== '') {
              words.push(word);
            }
          }
  
          $scope.sentence = words.join(' ');
  
          // if the user puts a space in the input
          // call parseSentence() to update $scope.words
          if (w.word.indexOf(' ') &gt; -1) {
            $scope.parseSentenceDebounced();
          }
  
      }
  
      $scope.parseSentence();
  
  }
  </code></pre>