title: Assign values to Angular-ui modal
body: <p>I think i have some pretty big holes in my code, as when the modal is appearing, the content from the table (which when you click on a row produces the modal), is not populating the input boxes I have inside of the modal. I think I'm tackling the situation in the wrong way and some direction would be fantastic.</p>
  
  <p>My JS:</p>
  
  <pre><code>var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);
  
  app.controller('myCtrl', function($scope, $http, $uibModal) {
  
  $http.get("Assignment005.json").success(function(response){
      $scope.myData = response.People;
  });
  
  $scope.modify = function(currentData){
  
      var modalInstance = $uibModal.open({
          animation: true,
          templateUrl: 'myModalContent.html',
          controller:function($scope, $uibModalInstance, details){
                  $scope.FirstName = details.FirstName;
                  $scope.LastName = details.LastName;
                  $scope.Age = details.Age;
                  $scope.Nickname = details.Nickname;
  
              $scope.update = function () {
                  $uibModalInstance.dismiss('cancel');
              };
          },
          size: 'lg',
          resolve: {
              details: function() {
                  return currentData;
              }
          }   
      });
  
  };
  }); 
  </code></pre>
  
  <p>My modal:</p>
  
  <pre><code>              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Your row of data&lt;/h4&gt;
                &lt;/div&gt;
                &lt;div class="modal-body" name="modelData" style="height:200px"&gt;
                    &lt;form class="form-horizontal pull-left form-width" role="form"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-4" for="first"&gt;First Name:&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                            &lt;input type="text" class="form-control" id="first" ng-model="FirstName"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-4" for="last"&gt;Last Name:&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt; 
                            &lt;input type="text" class="form-control" id="last" ng-model="LastName"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-4" for="age"&gt;Age:&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt; 
                            &lt;input type="text" class="form-control" id="age" ng-model="Age"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label class="control-label col-sm-4" for="nick"&gt;Nickname:&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt; 
                            &lt;input type="text" class="form-control" id="nick" ng-model="Nickname"&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-danger pull-left" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;button type="button" class="btn btn-success pull-right" data-dismiss="modal"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Main HTML in case it's needed:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron"&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;Essential Information&lt;/div&gt;
            &lt;div class="table-responsive"&gt;
                &lt;table class="table table-hover"&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;Age&lt;/th&gt;
                          &lt;th&gt;Nickname&lt;/th&gt;
                        &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                        &lt;tr data-ng-repeat="details in myData" data-ng-click="modify(details)"&gt;
                          &lt;td&gt;{{ details.FirstName }}&lt;/td&gt;
                          &lt;td&gt;{{ details.LastName }}&lt;/td&gt;
                          &lt;td&gt;{{ details.Age }}&lt;/td&gt;
                          &lt;td&gt;{{ details.Nickname }}&lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/tbody&gt;                    
                &lt;/table&gt;
                &lt;button type="button" class="btn btn-info pull-right" data-ng-click="new()"&gt;Add
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;div ng-include="myModalContent.html"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Im very new to using Angular so if you could be overtly simple with me that would help to clarify things, although again, any help is appreciated. </p>