title: Angularjs Show and Hide Button within ng-repeat
body: <p>I have a list which populates a screen using <code>ng-repeat</code>.
  Each row has a button for the user to click on to select the row. 
  Typically what you would use a radio button for but the user wants a button toggle.</p>
  
  <p>What I really want is to show the first button (hide the second on displaying the list first time) and after the user clicks on the first one to select a specific row, I want to hide the first button and show the second.
  The 2 button have different ids, text, style.
  So to the user, its like changing the look of the button after selection.</p>
  
  <p>I tried setting the <code>showfarebut1</code> / <code>showfarebut2</code> scope variable in my function <code>populateFareOption(row.col3.value, row.col4.value)</code> in the controller, but all the rows had the second button after button one is clicked.</p>
  
  <p>Any ideas or code snippet .. will be appreciated.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;tr ng-repeat="row in rowList"&gt;
      &lt;td&gt; {{row.col1.value}}&lt;/td&gt;
  
      &lt;td&gt;
          &lt;span class="price"&gt;PRICE:&amp;nbsp;
              &lt;strong class="amount"&gt;{{row.col2.value}}&lt;/strong&gt;
          &lt;/span&gt;
  
          &lt;button id="btnXX1" ng-show="showfarebut1" type="button" class="btn pull-right" ng-click="populateFareOption(row.col3.value,row.col4.value)"&gt;
  
              &lt;span class="text pull-left" name="fareOption" ng-model="travelCardForm.colOption" value="{{row.col3.value}}"&gt;Select&lt;/span&gt;
              &lt;i class="icon-placeholder"&gt;&lt;/i&gt;
          &lt;/button&gt; 
  
          &lt;button id="btnXX2" ng-show="showfarebut2" type="button" class="btn pull-right"&gt;
              &lt;span class="text pull-left"&gt;Selected&lt;/span&gt;
              &lt;i class="selected-icon pull-right"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/td&gt; 
  &lt;/tr&gt;
  </code></pre>
  
  <h2>Controller</h2>
  
  <pre><code>    $scope.showfarebut1=true;
      $scope.showfarebut2=false;
  
      $scope.populateFareOption = function(x,y){
           cardForm.fareOption.value=x;
           cardForm.productCode.value=y;
           $scope.showfarebut1=false;
           $scope.showfarebut2=true;
         }
  </code></pre>