title: AngularJS Get Single Model Record For Editing In Modal
body: <p>This seems like it should be easy to do but after googling around I haven't been able to find an exact answer.  I'm new to Angular so maybe it is just that I don't know how to ask the right question.</p>
  
  <p>Problem:  I have a table that I'm filling with rows of data using <code>ng-repeat</code>.  This is pretty straight forward.  However, each row has an edit button that when pressed, launches a popup window where the data can be edited.  So, for it to be edited the popup window's form needs to be pre-loaded with corresponding row's data.  Then, of course, the pages model should be updated when the popup's save button is clicked.</p>
  
  <p>Simply put, on click I want to open a popup with a form that is pre-filled with the data from a single row from my model.</p>
  
  <p>I am using Twitter Bootstrap's Modal.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;table class="table table-condensed table-hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;Code&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Business Functions&lt;/th&gt;&lt;th&gt;Description&lt;/th&gt;&lt;th&gt;Retention Period&lt;/th&gt;&lt;th&gt;Examples&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="record in InformationManagementRecords | filter:query"&gt;
              &lt;td&gt;{{record.RecordNumber}}&lt;/td&gt;
              &lt;td&gt;{{record.ActivitiesCategoryName}}&lt;/td&gt;
              &lt;td&gt;{{record.BusinessFunction}}&lt;/td&gt;
              &lt;td&gt;{{record.ActivitiesCategoryDescription}}&lt;/td&gt;
              &lt;td&gt;{{record.OfficialRetention}}&lt;/td&gt;
              &lt;td&gt;{{record.TransactionExampleRecords}}&lt;/td&gt;
              &lt;td class="driverButtonsColumn"&gt;
                  &lt;div class="btn-group btn-group-xs"&gt;
                      &lt;button type="button" class="btn btn-default btn-xs" title="Edit" ng-click="setModalData(record)" data-toggle="modal" data-target="#addEditModal"&gt;&lt;span class=" glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Notice how my button has a <code>ng-click="setModalData(record)"</code> on it.  In an attempt to solve this problem I've created a function in my controller that returns a single record, it works but I can't seem to access the data when that function runs but again, maybe I'm doing it wrong.</p>
  
  <p>My Controller:</p>
  
  <pre><code>var InfoManagementControllers = angular.module('InfoManagementControllers', []);
  
  InfoManagementControllers.controller('InfoManagementCtrl', ['$scope', '$routeParams', '$http',
  function ($scope, $routeParams, $http) {
      $http.get('api/InformationManagement').success(function (data) {
          $scope.InformationManagementRecords = data;
  
          $scope.setModalData = function (record) {
              $scope.modalData = record;
          }
      });
  }]);
  </code></pre>
  
  <p>I hope this is enough information.</p>
  
  <p>Thank you,</p>
  
  <p>Aaron</p>