title: How to populate data in a twitter-bootstrap modal using angularjs
body: <p><strong>Using</strong>: </p>
  
  <p>-<em>Twitter-Bootstrap</em></p>
  
  <p>-<em>AngularJs</em></p>
  
  <p>Here's the story</p>
  
  <p>Created table: rows are dynamically created using "ng-repeat". The data item inside the first cell (in a row) has an on-click event triggering a Twitter-Bootstrap modal to appear. The input fields in the modal match the columns in the [table] row. The user edits the necessary data in that row. This should update database and changes reflect immediately in the table.</p>
  
  <p>However, I cannot get the data from the table to populate inside the modal fields.   </p>
  
  <p>Here's the weird thing... If I use a Twitter-Bootstrap (TBS) popup instead of a TBS modal, everything works. <strong>EVERYTHING</strong>. All the data populates inside the popup fields, it's editable, it actually saves to the database, AND updates the table row! But popups suck and I am restricted from using them.  </p>
  
  <p>Using the EXACT SAME code, why won't the data populate inside a modal?
  Obviously, this leads me to believe using syntactically identical code, a popup and modal do not function the same way. But why?</p>
  
  <p>The research I've done, and documentation I've perused on here as well as both TBS and AngularJS, has been either too overwhelming or altogether unhelpful.</p>
  
  <p>In Summary, this is the functionality I'm looking to achieve:</p>
  
  <ul>
  <li>User clicks the data inside the first cell of a table row</li>
  <li><em>(on-click) Modal appears <strong>populated</strong> with the data in the row</em> (particularly this).</li>
  <li>User can edit the fields</li>
  <li>Save/Update.  The trigger event can be "enter" or button "on-click"  I don't care, I just want it to work.</li>
  </ul>
  
  <p>Here's the gist of the code (with the popup which works, and the modal which doesn't). </p>
  
  <p>Disclaimer: I couldn't get it to work in here (SO or jfiddle) I'm probably missing a reference. But I know you all are smarter than me, and with what I've given, I have the utmost confidence in this community to be able to figure out what it is I'm doing wrong.</p>
  
  <p>I thank you all in advance for your help.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="person"&gt;
  &lt;head&gt;
      &lt;title&gt;HELP ME WITH MODALS&lt;/title&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div ng-controller="PersonCtrl"&gt;
          &lt;table style="border:1px solid black; padding:3px;"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;First Name&lt;/th&gt;
                      &lt;th&gt;Last Name&lt;/th&gt;
                      &lt;th&gt;Favorit Color&lt;/th&gt;
                      &lt;th&gt;Favorit Food&lt;/th&gt;
                      &lt;th&gt;Favorite Season&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr ng-repeat="person in persons" ng-click="updatePerson(person)"&gt;
                      &lt;td data-toggle="modal" data-target="#editModal"&gt;{{person.firstName}}&lt;/td&gt;
                      &lt;td&gt;{{person.lastName}}&lt;/td&gt;
                      &lt;td&gt;{{person.favoriteColor}}&lt;/td&gt;
                      &lt;td&gt;{{person.favoriteFood}}&lt;/td&gt;
                      &lt;td&gt;{{person.favoriteSeason}}&lt;/td&gt;
                      &lt;td&gt;
                          &lt;button popover-template="dynamicPopover.templateUrl" popover-placement="left" popover-title="Edit" ng-click="current.person=person"&gt;Edit&lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  
          &lt;!-- Modal --&gt;
          &lt;div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                              &lt;span aria-hidden="true" style="color:#513011;"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;h4 class="modal-title" id="editModalLabel"&gt;Edit Person&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;!--/HEADER--&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;form ng-submit="update(current.person)"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="firstname"&gt;First Name:&lt;/label&gt;
                                  &lt;input name="firstname" type="text" ng-model=current.person.firstName class="form-control" required&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="lastname"&gt;Last Name:&lt;/label&gt;
                                  &lt;input name="lastname" type="text" ng-model=current.person.lastName class="form-control" required&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="favoritecolor"&gt;Favorite Color:&lt;/label&gt;
                                  &lt;input name="favoritecolor" type="text" ng-model=current.perosn.favoriteColor class="form-control"&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="favoritefood"&gt;Favorite Food:&lt;/label&gt;
                                  &lt;input name="favoritefood" type="text" ng-model=current.perosn.favoriteFood class="form-control"&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="favoriteseason"&gt;Favorite Season:&lt;/label&gt;
                                  &lt;input name="favoriteseason" type="text" ng-model=current.perosn.favoriteSeason class="form-control"&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                      &lt;!--/MODAL-BODY--&gt;
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;input type="submit" ng-click="update(current.person)" class="btn btn-primary" value="Save" /&gt;
                      &lt;/div&gt;
                      &lt;!--/MODAL-FOOTER--&gt;
                  &lt;/div&gt;
                  &lt;!--/MODAL-CONTENT--&gt;
              &lt;/div&gt;
              &lt;!--/MODAL-DIALOG--&gt;
          &lt;/div&gt;
          &lt;!--/MODAL--&gt;
      &lt;/div&gt;
      &lt;!--/CONTROLLER--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  &lt;!-- script for edit popover--&gt;
  &lt;script type="text/ng-template" id="popoverTemplate.html"&gt;
      &lt;div&gt;
          &lt;form ng-submit="update(current.person)"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="firstname"&gt;First Name:&lt;/label&gt;
                  &lt;input name="firstname" type="text" ng-model=current.person.firstName class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="lastname"&gt;LastName:&lt;/label&gt;
                  &lt;input name="lastname" type="text" ng-model=current.person.lastName class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="favoritecolor"&gt;Favorite Color:&lt;/label&gt;
                  &lt;input name="favoritecolor" type="text" ng-model=current.person.favoritecolor class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="favoritefood"&gt;Favorite Food:&lt;/label&gt;
                  &lt;input name="favoritefood" type="text" ng-model=current.person.favoritecolor class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="favoriteseason"&gt;Favorite Season:&lt;/label&gt;
                  &lt;input name="favoriteseason" type="text" ng-model=current.person.favoritecolor class="form-control"&gt;
              &lt;/div&gt;
              &lt;input type="submit" class="btn btn-default" value="Submit"&gt;
              &lt;input type="button" class="btn btn-default pull-right" ng-click="delete(current.schoolTerm)" value="Delete"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script&gt;
      var person = angular.module('person', []);
      personApp.controller('PersonCtrl', [
      function ($scope) {
          var person = [
              {
                  'firstName': 'Christine',
                  'lastName': 'Smith',
                  'favoriteColor': 'Pink',
                  'favoriteFood': 'Sushi',
                  'favoriteSeason': 'Summer'
              },
              {
                  'firstName': 'Dana',
                  'lastName': 'Carvey',
                  'favoriteColor': 'Yellow',
                  'favoriteFood': 'Tomatoes',
                  'favoriteSeason': 'Summer'
              },
              {
                  'firstName': 'Terry',
                  'lastName': 'Gross',
                  'favoriteColor': 'Chartreuse',
                  'favoriteFood': 'Lasagna',
                  'favoriteSeason': 'Spring'
              }
          ];
  
      }]);
  &lt;/script&gt;
  </code></pre>