title: Edit In Place Content Editing
body: <p>When using <code>ng-repeat</code> what is the best way to be able to edit content?</p>
  
  <p>In my ideal situation the <strong>added</strong> birthday would be a hyperlink, when this is tapped it will show an edit form - just the same as the current add form with an update button.</p>
  
  <p><a href="http://plnkr.co/edit/E35yeU?p=preview">Live Preview (Plunker)</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head lang="en"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Custom Plunker&lt;/title&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        document.write('&lt;base href="' + document.location + '" /&gt;');
      &lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
      rel="stylesheet"&gt;
    &lt;/head&gt;
  &lt;body ng-app="birthdayToDo" ng-controller="main"&gt;
      &lt;div id="wrap"&gt;
  
        &lt;!-- Begin page content --&gt;
        &lt;div class="container"&gt;
          &lt;div class="page-header"&gt;
            &lt;h1&gt;Birthday Reminders&lt;/h1&gt;
          &lt;/div&gt;
              &lt;ul ng-repeat="bday in bdays"&gt;
                  &lt;li&gt;{{bday.name}} | {{bday.date}}&lt;/li&gt;
              &lt;/ul&gt;
  
             &lt;form ng-show="visible" ng-submit="newBirthday()"&gt;
              &lt;label&gt;Name:&lt;/label&gt;
              &lt;input type="text" ng-model="bdayname" placeholder="Name" ng-required/&gt;
              &lt;label&gt;Date:&lt;/label&gt;
              &lt;input type="date" ng-model="bdaydate" placeholder="Date" ng-required/&gt;
              &lt;br/&gt;
              &lt;button class="btn" type="submit"&gt;Save&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;div id="push"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
        &lt;div class="container"&gt;
          &lt;a class="btn" ng-click="visible = true"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;Add&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>var app = angular.module('birthdayToDo', []);
  
  app.controller('main', function($scope){ 
  
      // Start as not visible but when button is tapped it will show as true 
  
          $scope.visible = false;
  
      // Create the array to hold the list of Birthdays
  
          $scope.bdays = [];
  
      // Create the function to push the data into the "bdays" array
  
      $scope.newBirthday = function(){
  
          $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});
  
          $scope.bdayname = '';
          $scope.bdaydate = '';
  
      };
  });
  </code></pre>