Solved: AngularJs - binding checkbox collection in controller

My Html:

 <ol  ng-model="gcwr.checked" ng-repeat="gcwr in gcwrs" id="gcwr">                         
 <label class="checkbox" for="{{gcwr.Id}}">  
 {{gcwr.Description}}
 <input ng-model="gcwr.checked" type="checkbox"  /></label>
 </ol>

My Container Controller: 

   // initialize section
    $scope.gcwrs = API.GetGCWRs();

   // in the save/submit function
    var newContainer = $scope.newContainer;
    var myGCWRS;
    var tmp = angular.forEach($scope.gcwrs, function (gcwr) {
        myGCWRS += gcwr.checked ? gcwr : null;
        });

    newContainer.GCWRs = [
        angular.copy(myGCWRS)
    ];

Problem:

The GCWRs are populating in the form, but I am doing something wrong in collecting the checked gcwrs in the submit/save function ad adding the collection to the newContainer.

Any ideas?

-- Never a dull day in the angular world :(

SOLVED:

What a pain in the ass!!! TGIF because now I have a reason.

Here's the solution: (sorry, I changed some names from original post)

    var selectedGCWRs = [];        
    var tmp = angular.forEach($scope.gcwrs, function (gcwr) {            
        if (gcwr.checked) {      
            selectedGCWRs.push(gcwr);
        }
    });

    newContainer.GCWRs = selectedGCWRs;

   .... then go on and save the newContainer.

[Note: Had I used angular.copy, the $$hashkeys that angular creates in ng-repeat would not have been stripped away; the server would have thus rejected this collection as it would have an extra property, ie $$hashkey, that did not match the model class on the server. By simply passing the collection to the container, the $$hashkeys are stripped away and the server is happy.]

I think you need to use

var myGCWRS = [];
var tmp = angular.forEach($scope.gcwrs, function (gcwr) {
    if(gcwr.checked) {
        myGCWRS.push(gcwr);
    }
});
newContainer.GCWRs = angular.copy(myGCWRS);

I'm not really sure that you need a new container for anything. With angular's bidirectional binding the gcwrs array is always current. When you are ready to process the selected elements, just look in the array.

Here's a plnkr that demonstrates: http://plnkr.co/edit/DxQY74XBxzOU66X18xqH

Notice the object state changes as the checkboxes are ticked/unticked.

SOLVED:

What a pain in the ass!!! TGIF because now I have a reason.

Here's the solution: (sorry, I changed some names from original post)

var selectedGCWRs = [];        
var tmp = angular.forEach($scope.gcwrs, function (gcwr) {            
    if (gcwr.checked) {      
        selectedGCWRs.push(gcwr);
    }
});

newContainer.GCWRs = selectedGCWRs;

.... then go on and save the newContainer.

[Note: Had I used angular.copy, the $$hashkeys that angular creates in ng-repeat would not have been stripped away; the server would have thus rejected this collection as it would have an extra property, ie $$hashkey, that did not match the model class on the server. By simply passing the collection to the container, the $$hashkeys are stripped away and the server is happy.]