AngularJS ng-show (not changing with boolean value)

Question

I've got a list of items I'm displaying, and want the user to delete any of them from the list (via checkbox and a delete button). When I select the items and call a function from the button, I can access the items (change their text and whatnot) but setting their corresponding boolean bound to ng-show to false doesn't seem to work. Some suggested trying $scope.$apply() but this is giving me errors - the internet says it's b/c Angular is in the middle of a digest. Anywho, a simplified version of what's going on.

angular.module('myApp', ['ngSanitize'])
.controller("itemController", ['$scope','$location',function($scope,$location) {

$scope.items = [];
$scope.to_hide = [];

for ( var i = 0; i < 10; i++) {
    var id = i;
    var title = "Some Title";
    var is_visible = true;

    var item = { "id" : id,
                 "title" : title,
                 "visible" : is_visible }

    $scope.items.push_back(item);
}

$scope.toggleSelection = function(item) {
    $scope.to_hide.push(item.id);   
}

$scope.handleDelete = function(item) {
    for (var i = 0; i < $scope.items.length; i++) {
        if ($scope.to_hide.indexOf($scope.items[i].id) > -1) {
            # Can directly edit item here -- but visibility stays the same 
            $scope.items[i].visible = false;
        }
    }

    $scope.$apply(); // This gives errors.
};

})];

HTML

<div ng-app="myApp" ng-controller="itemController">
    <div ng-repeat="item in items" ng-show="{{item.visible}}>
        <input type="checkbox" ng-click="toggleSelection(item)">
    </div>
    <div>
        <div>{{item.title}}</div>
    </div>
</div>

Answer 1

You don't need that interpolation in attributes like ng-show and ng-hide.. Also, i guess instead of sending the item itself, you should instead just send the item index and access it in the controller accordingly.

So here's how you can possibly do it. Update your HTML to :

    <div ng-app="myApp" ng-controller="itemController">
        <div ng-repeat="item in items" ng-show="item.visible>               <input type="checkbox" ng-click="toggleSelection($index)">
        </div>
        <div>
            <div>{{item.title}}</div>
        </div>
    </div>

And then in the JS :

    $scope.handleDelete = function(item) {
        $scope.items[$index].visible = false;
    };