title: AngularJS : watching a particular property in an array of objects for changes in the property's value
body: <p>In my custom directive, I'm adding elements to the DOM based on the number of objects in my datasource array. I need to watch a specific property in each object. As I add these elements to the DOM, I want to set up a $watch on the <code>checked</code> property of each object in the <code>toppings</code> array, but it's not working, and I don't know why.  I set up a breakpoint inside the function that should be invoked when the property changes from true to false or false to true, but that function is never invoked. Is the reason obvious?  I'm just learning Angular, so I could easily be making a stupid error.</p>
  
  <pre><code>$scope.bits = 66;  (i.e. onions and olives)
  
  
  $scope.toppings = [
      { topping: 1, bits: 2, name: 'onions' },
      { topping: 2, bits: 4, name: 'mushrooms' },
      { topping: 3, bits: 8, name: 'peppers' },
      { topping: 4, bits: 16, name: 'anchovies' },
      { topping: 5, bits: 32, name: 'artichokes' },
      { topping: 6, bits: 64, name: 'olives' },
      { topping: 7, bits: 128, name: 'sausage' },
      { topping: 8, bits: 256, name: 'pepperoni' }
       ]
  </code></pre>
  
  <p>Each object in the model gets a new <code>checked</code> property which will be true or false. </p>
  
  <p>NOTE: the object array will at most contain a dozen or so items.  Performance is not a concern.</p>
  
  <pre><code>link: function link(scope, iElement, iAttrs, controller, transcludeFn) {
  
  
    &lt;snip&gt;
  
   // At this point  scope.model refers to $scope.toppings. Confirmed.
  
    angular.forEach(scope.model, function (value, key) {
  
       // bitwise: set checked to true|false based on scope.bits and topping.bits
  
       scope.model[key].checked = ((value.bits &amp; scope.bits) &gt; 0);  
  
  
       scope.$watch(scope.model[key].checked, function () {
           var totlBits = 0;
           for (var i = 0; i &lt; scope.model.length; i++) {
              if (scope.model[i].checked) totlBits += scope.model[i].bits;
           }
            scope.bits = totlBits;
        });
  
     });
  
       &lt;snip&gt;
  </code></pre>