Angular directive inside ng-repeat not two-way binding - angularjs-directive

Question

I have a directive that simulates a simple checkbox with images:
movieApp.directive("imageCheckbox",
function()
{
return {
restrict: "E",
scope: { ngModel: '=' },
template:
'<div ng-switch on="ngModel"> \
<div ng-switch-when="true"> \
<img src="/Content/Images/CheckTrue.png" ng-click="onClick()"> \
</div> \
<div ng-switch-default> \
<img src="/Content/Images/CheckFalse.png" ng-click="onClick()"> \
</div> \
</div>',
link: function(scope, element, attrs)
{
scope.onClick = function()
{
scope.ngModel = !scope.ngModel;
};
}
};
});
This works fine outside of a ng-repeat. However, inside of a ng-repeat it won't two-way bind to the ngModel.
The ng-repeat is inside a table, something like this:
<tr class="movie-info-row" ng-repeat="movie in movies">
<div class="movie-checkbox">
<image-checkbox ng-model="isSelectedToDownload" ng-click="onSelectToDownloadClick(movie.RefId)" />
</div>
There is a lot more inside the table row but that is not relevant here.
The onSelectToDownloadClick handler works and gives me the correct movie.RefId but the isSelectedToDownload flag on my scope is not updated. It is updated when outside of the ng-repeat.
Any ideas?

Answer 1

I finally figured this out and maybe it's useful to others as well:
The ng-repeat directive creates its own child scope which prototypically inherits from the parent scope.
By assigning scope.ngModel = !scope.ngModel; in the onClick function I actually create a new variable ngModel on the child scope, thus and thereby hiding the parent's ngModel variable and disabling the two-way binding.
Solution? There are a few.
I went for controller-as syntax (setting controller to vm) and then invoke like this:
<image-checkbox ng-model="vm.isSelectedToDownload" ng-click="onSelectToDownloadClick(movie.RefId)" />
I cannot change prototypically inherited variables themselves; however I can change their properties.