title: How to $watch changes on models created by ng-repeat?
body: <p>Consider <a href="http://plnkr.co/edit/T5h63NGdhJMgmx40N45R?p=preview">this Plnkr</a> for example. I don't know how many members of <code>fooCollection</code> will be created beforehand. So I don't know how many <code>bar</code> models are going to exist.</p>
  
  <p>But I know they are going to be angular models, and I know where they are going to be.</p>
  
  <p>How do I do a <code>$watch</code> on these?</p>
  
  <p>I need to do that because I need to trigger behavior when a <code>bar</code> model is changed. Watching the fooCollection itself is not enough, the <code>$watch</code> listener does not fire when a <code>bar</code> is changed.</p>
  
  <p>Relevant html:</p>
  
  <pre><code>&lt;body ng-controller="testCtrl"&gt;
    &lt;div ng-repeat="(fooKey, foo) in fooCollection"&gt;
      Tell me your name: &lt;input ng-model="foo.bar"&gt;
      &lt;br /&gt;
      Hello, my name is {{ foo.bar }}
    &lt;/div&gt;
    &lt;button ng-click="fooCollection.push([])"&gt;Add a Namer&lt;/button&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Relevant JS:</p>
  
  <pre><code>angular
  .module('testApp', [])
  .controller('testCtrl', function ($scope) {
    $scope.fooCollection = [];
  
    $scope.$watch('fooCollection', function (oldValue, newValue) {
      if (newValue != oldValue)
        console.log(oldValue, newValue);
    });
  });
  </code></pre>