Deep watch on array not working in AngularJS data binding

Question

I am using the popover directive from AngularStrap. I have a colleciton of objects that get rendered as toggles. When the toggles are clickedthe data on the scope is not changed... I've tried loads of different ways of doing this.

This is the controller of the popover

app.controller('CurvesPopoverCtrl', ['$scope', '$filter', 'AppData',
    function($scope, $filter, AppData) {
        'use strict';

        $scope.popoverCurrencies = AppData.getCurrencies();
        $scope.$watch ('popoverCurrencies', function(val) {
            if(val !== null && val !== undefined){ // only fires when popover opens.
                console.log("toggled", val);
                //AppData.setCurrencies($scope.currencies);
            }
        }, true); // deep watch


    }
]);

This is the template of the popover

<div class="well curves-popover" ng-controller="CurvesPopoverCtrl">
  <div class="row">
    <div ng-repeat="currency in popoverCurrencies">
      <div class="clearfix" ng-if="$index % 3 == 0"></div>
      <div class="col-md-4">
        <div class="togglebutton">
          <label>
            <span ng-class="currency.iconClass"></span> <span>{{currency.ccy}}</span>
            <input type="checkbox" checked="currency.build">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

It gets a little complicated when you're attempting to watch a collection while using ng-repeat. According to the docs:

Each template instance gets its own scope ...

Therefore, the watch is not notified when the values within these other scopes are updated. One workaround is to bind a separate controller to each of the iterations of ng-repeat, as seen here. But another, possibly cleaner, approach is to utilize the ng-change directive to intercept the updating of these values. I explained it a bit here.