title: AngularJS: How do I hide clicked element in angular?
body: <p>I'm totally new to angular and I'm finding that doing simple things aren't as obvious to me? I have a list of items that I display using ng-repeat. I simply want to hide the element once I click on an element within that scope. I'd like to do it the "angular" way with good practices.. just not sure what that is. </p>
  
  <p>This is html</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
      &lt;div ng-controller="FruitsCtrl"&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="fruit in fruits"&gt;
                  &lt;p&gt;{{fruit.name}}&lt;/p&gt;
                  &lt;button ng-click="hideMe()"&gt;hide li&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my js</p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.factory('Fruits', function () {
      var Fruits = [{
          name: "banana"
      }, {
          name: "watermelon"
      }, {
          name: "strawberry"
      }];
  
      return Fruits;
  });
  
  
  function FruitsCtrl($scope, Fruits) {
      $scope.fruits = Fruits;
  
      $scope.hideMe = function () {
          alert('hide this li');
      };
  }
  </code></pre>
  
  <p>I have this on jsfiddle: <a href="http://jsfiddle.net/hS5q8/2/" rel="nofollow">http://jsfiddle.net/hS5q8/2/</a></p>
  
  <p>Help or direction would be great! Thanks!!</p>