title: Angularjs Apply toggle function to only the clicked button inside ng-repeat
body: <p>I created this <a href="http://jsfiddle.net/thomsebastin/2rkd9xjq/" rel="nofollow">fiddle</a> exclusively to adress my problem. I am <code>ng-repeat</code>ing certain section. I have a toggle functionality to be implemented inside it. However, when I click the button, function gets triggered for all the repeated items. This works fine when not using <code>ng-repeat</code> inspite of using the same function name on click. Below is the code. I guess there is something like the <code>this</code> operator that I can make use here. My code so far (I created this for the fiddle and not the original),  </p>
  
  <p><strong>HTML</strong>  </p>
  
  <pre><code>&lt;div ng-app="app"&gt;
      &lt;div ng-controller="CommentController"&gt;
          &lt;div ng-repeat="list in lists"&gt;
              &lt;button ng-click="showDiv()" class="review"&gt;{{lists[$index]}}&lt;/button&gt;
              &lt;div ng-show="hiddenDiv"&gt;This is the div to be toggled on clicking any of the above button. And they do so as they make use of &lt;i&gt;same function on click.&lt;/i&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>controller</strong>  </p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('CommentController', function ($scope) {
      $scope.hiddenDiv = true;
      $scope.showDiv = function () {
          $scope.hiddenDiv = !$scope.hiddenDiv;
      };
      $scope.lists = ["one", "two", "three", "four", "five"];
  });
  </code></pre>