I am utilizing a controller that holds data to be iterated through using ng-repeat, and I am using it in conjunction with this selection model directive.
However, once I use ng-repeat to generate multiple entries in the DOM, the bindings to $scope.selectedItems cease to function.
While I am aware that ng-repeat creates a new child scope for each iteration, I am puzzled as to why the updates to the selectedItems property are not being recognized in the MyController.
Controller:
(function() {
angular.module('myModule', ['product.module'])
.controller('MyController' ['$scope', 'SomeService' function($scope, ProductService) {
$scope.selectedItems = [];
$scope.productService = new ProductService() //constructor pattern object
$scope.products = $scope.productService.items;
$scope.productService.fetchData(); //grabs data from server and sets the productService.items to an array of objects
}]);
})();
HTML
<div ng-controller="MyController">
<ul>
<li ng-repeat="product in products"
selection-model-type="checkbox"
selection-model-mode="multiple"
selection-model-selected-items="selectedItems">
{{product.name}}
</li>
</ul>
<div ng-controller="MyController"> <!-- this binding doesn't work after the ng-repeat takes place -->
There are {{selectedItems.length}} products
</div>