title: Angularjs: How to pass specific data to modal
body: <p>I'm struggling to display 'nested' [array] data in my modal. I am able to see all my data fetched from a url in angular, on my view page. However, when I ng-click on the same element to pop out a modal to see the same information on the modal, I can't see some of the information. In this case I cant the employees or developers.</p>
  
  <p><strong>url fetching code in angular</strong></p>
  
  <pre><code>**controller used is 'HomeController'
  **/comments is where my json data is located with 'employees' 
  being a one-to-many relationship entity in my backend (which might be the issue in my head)
  
  var vm = this;
  vm.projects = [];
  $http.get('/comments')
      .then(function(result) {
          console.log(result);
          vm.projects = result.data; 
       });
  </code></pre>
  
  <p><strong><code>data</code></strong> as used in my modal template (not working code in modal)</p>
  
  <pre><code>    &lt;div ng-repeat="data in controller.projects"&gt;
          &lt;ul ng-repeat="employee in data.employees"&gt;
              {{employee.name}}
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><code>controller</code> comes from <code>&lt;div ng-controller="HomeController as controller"&gt;</code></p>
  
  <p>I have also tried this;</p>
  
  <pre><code>    &lt;div ng-repeat="employee in Project.Employees" class="selected-item"&gt;
          {{employee.name}}
      &lt;/div&gt;
  </code></pre>
  
  <p>but doesn't work!</p>
  
  <p>As seen below, the <code>employees</code> show up on the 'normal' page.</p>
  
  <p><a href="https://i.stack.imgur.com/FQYzI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FQYzI.png" alt="enter image description here"></a></p>
  
  <p>However, when I <code>ng-click="editProject(data)"</code> the above card to pop up the modal, everything else shown above (not shown below here) pops up except the employees. Could it be a routing issue?</p>
  
  <p><a href="https://i.stack.imgur.com/3QZmk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3QZmk.png" alt="enter image description here"></a></p>
  
  <p>Basically everything works perfect on the template view until I pop out the modal. This is the "modal popping" code;</p>
  
  <pre><code>$scope.editProject = function(data) {
      $scope.showSelected = true;
      $scope.SelectedProject = data;
      var fromDate = moment(data.start).format('DD/MM/YYYY LT');
      var endDate  = moment(data.end).format('DD/MM/YYYY LT');
  
      $scope.Project = { 
          ProjectID : data.projectID, 
          Client : data.client,
          Title : data.title,
          Description: data.description,
          Employees: data.employees,
          StartAt : fromDate,
          EndAt : endDate,
          IsFullDay : false
      }
  
       $scope.ShowModal()
  },
  
  //This function is for show modal dialog
  $scope.ShowModal = function(){
      $scope.option = {
          templateUrl: 'modalContent.html',
          controller: 'modalController',
          backdrop: 'static',
          resolve: {
              Project : function () { 
                  return $scope.Project;
              },
              SelectedProject : $scope.SelectedProject                  
          }
      };
  </code></pre>
  
  <p>Could there be a promise I'm missing in the <code>ShowModal</code> <code>resolve</code>?</p>
  
  <p>Meanwhile in chrome devtools, the <code>employees</code> seemed to have been 'picked' up as shown below;</p>
  
  <p><a href="https://i.stack.imgur.com/KicmK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KicmK.png" alt="enter image description here"></a></p>
  
  <p>However when I open the object, interestingly it says array is empty;</p>
  
  <p><a href="https://i.stack.imgur.com/7vB4A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7vB4A.png" alt="enter image description here"></a></p>
  
  <p>I am new to angular and web development in general. Let me know if you need me to reveal my backend or any other code you think is missing. I'm just thinking it's an angular issue. Thanks for your help.</p>