AngularJS: Hide li element when it's clicked
<p>I have a html code:</p>

<pre><code>&lt;div class="col-xs-6"&gt;
  &lt;ul class="list-group itemList"&gt;
    &lt;li class="list-group-item" ng-repeat="(id, product) in drinks" ng-click="addToShoppingList(id)"&gt;
  &lt;strong&gt;{{ product.name }}&lt;/strong&gt; - {{ product.price | currency }}
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And  the Angular code:</p>

<pre><code>$scope.addToShoppingList = function(id){

};
</code></pre>

<p>I just want the  <code>id</code> element to disappear (hide, fadeOut etc), when it's clicked. I bet it's something about the <code>ng-hide</code> but for now I'm too dumby for that.</p>

<p>Thanks for any answers.</p>

<p><strong>Edit</strong>: It should be inside the addToShoppingList function.</p>

<p><strong>Edit2</strong>: This is the whole function:</p>

<pre><code>$scope.addToShoppingList = function(id){
   $scope.itemsToBuy.push($scope.drinks[id]);
};
</code></pre>

<p>When the <code>li</code> element is clicked, it pushes that element to the new array. And then it should be hidden. </p>

<p><strong>Edit3</strong>: If I want to cancel it and make the items come back to the array, the result is strange.<a href="https://i.stack.imgur.com/7ptuY.gif" rel="nofollow"><img src="https://i.stack.imgur.com/7ptuY.gif" alt="enter image description here"></a></p>