title: Passing information to modal
body: <p>I'm using angularjs and bootstrap to create a modal. The modal is going to display an image. I get the image source through the database using an email address associated with the image. However I am not sure how to pass the information to the modal to get the image itself.</p>
  
  <p>html </p>
  
  <pre><code>&lt;tr ng-repeat="employee in timeSheets"&gt;
      &lt;td&gt;{{employee.name}}&lt;/td&gt;
      &lt;td&gt;{{employee.period}}&lt;/td&gt;
      &lt;td&gt;{{employee.status}}&lt;/td&gt;
      &lt;td&gt;{{employee.regHours}}&lt;/td&gt;
      &lt;td&gt;{{employee.overHours}}&lt;/td&gt;
      &lt;td&gt;{{employee.totHours}}&lt;/td&gt;
      &lt;td&gt;&lt;div ng-controller=imageController&gt;
          &lt;a ng-click="imageModal(employee.username)"&gt;Attachment&lt;/a&gt;
      &lt;/div&gt;&lt;/td&gt;
  </code></pre>
  
  <p>imageControllerJS-</p>
  
  <pre><code>function imageController ($scope, $modal) {
      $scope.imageModal = function() {
          alert("inside ImageModal");
          var modalInstance = $modal.open({
              templateUrl : 'HTML/imageModal.html',
  
              controller : imageModalController,
  
          });
      };  
  }
  </code></pre>
  
  <p>imageModal-js</p>
  
  <pre><code>function imageModalController($scope, $http, employeeFactory,$routeParams,modalInstance) {
      $scope.params = $routeParams.username;
      $scope.getImageReturn = function(data) {
          $scope.img_source = data.path;
          alert($scope.img_source);
          //data.path;
      };
      $scope.getImage = function(email) {
  
          employeeFactory.getImage(email);
  
      };
      $scope.getImage($scope.params);
      $scope.cancel = function() {
  
          $modalInstance.dismiss('cancel');
      };
  </code></pre>
  
  <p>UPDATED CODE FROM ANSWER BELOW</p>
  
  <pre><code>    function imageController ($scope, $modal) {
  $scope.imageModal = function() {
      alert("inside loginModal");
      var modalInstance = $modal.open({
          templateUrl : 'HTML/imageModal.html',
          controller : imageModalController,
          resolve: { imageInfo: function() {return username; }}
      });
  };  
  </code></pre>
  
  <p>}</p>
  
  <pre><code>    imageModalController.$inject = ['imageInfo']
      function imageModalController($scope, $http, employeeFactory,$routeParams,modalInstance) {
  $scope.imageInfo = imageInfo;
  alert("imageinfo");
  $scope.getImageReturn = function(data) {
      $scope.img_source = data.path;
      alert($scope.img_source);
      //data.path;
  };
  
  
  
  
      Now spitting out
      ReferenceError: imageInfo is not defined
  at new imageModalController (http://localhost/Employee_12_30_AngularJS/JS/imageModal.js:4:21)
  at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js:30:346)
  at Object.instantiate (
  </code></pre>