AngularJS: Hide li element when it's clicked - angularjs

Question

I have a html code:
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
And the Angular code:
$scope.addToShoppingList = function(id){
};
I just want the id element to disappear (hide, fadeOut etc), when it's clicked. I bet it's something about the ng-hide but for now I'm too dumby for that.
Thanks for any answers.
Edit: It should be inside the addToShoppingList function.
Edit2: This is the whole function:
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
};
When the li element is clicked, it pushes that element to the new array. And then it should be hidden.
Edit3: If I want to cancel it and make the items come back to the array, the result is strange.

Answer 1

You could do something like this:
<div ng-controller="MyCtrl2">
<h2>Hide each LI:</h2>
<ul>
<li ng-click="pushItem(suggestion)" ng-repeat="suggestion in results" ng-click="visible = false">
{{suggestion}}
</li>
</ul>
</div>
Below is the angular code:
var myApp = angular.module('myApp',[]);
function MyCtrl2($scope) {
$scope.results = [1, 2, 3, 4];
$scope.itemsToBuy = [];
$scope.pushItem = function(item){
$scope.itemsToBuy.push(item);
$scope.results.splice($scope.results.indexOf(item),1);
}
}
JS Fiddle on the same:
http://jsfiddle.net/59gdo817/
On the vice-versa, just add the item back to results array to show the li back.

Answer 2

You can add a new status to the $scope.drinks array called isHidden which will track whether or not the item is hidden. When the user clicks on that li, the function will set isHidden to true and the ng-hide will immediately cause it to hide from the DOM.
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)" ng-hide="product.isHidden===true">
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
$scope.drinks[id].isHidden = true;
};

Answer 3

How about this:
<div class="col-xs-6">
<ul class="list-group itemList">
<li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id);" ng-hide='product.hidden'>
<strong>{{ product.name }}</strong> - {{ product.price | currency }}
</li>
</ul>
</div>
And in your addToShoppingList, you can set the product to hidden:
$scope.addToShoppingList = function(id){
$scope.itemsToBuy.push($scope.drinks[id]);
$scope.drinks[id].hidden = true;
};