title: AngularJS scope variable always undefined
body: <p>This might sound like a silly question but I've been stuck on this one for a few hours.  There must be something amazingly simple I'm overlooking.</p>
  
  <p>I've got an ng-repeat directive which is outputting a list of items:</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      &lt;div ng-repeat="foo in bars"&gt;
      ....
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then inside, at the end of the list I've got a form to add to the list:</p>
  
  <pre><code>&lt;div class="add"&gt;
      &lt;input ng-model="valueToAdd" class="weight" /&gt;
      &lt;a ng-click="addStuff()" class="button-small"&gt; + Add&lt;/a&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>addStuff()</code> method is on my controller:</p>
  
  <pre><code>function MyCtrl($scope) {
      $scope.addStuff= function () {
          alert($scope.valueToAdd);
      }
  }
  </code></pre>
  
  <p>But <code>$scope.valueToAdd</code> always gives me <code>undefined</code>.</p>
  
  <p>What am I missing?</p>
  
  <p>EDIT: Here's a punker where this problem is reproduced: <a href="http://plnkr.co/edit/YoGdx8?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/YoGdx8?p=preview</a></p>