Angular callback issue for objects

Question

I have 2 API calls which provide 2 JSON Arrays. The controller is written as :-

function RDetailController($routeParams, Rep) {
    var self = this;
    self.Name = $routeParams.Name;

    Rep.envGetSingle(self.Name).then(function (response) {
      // console.log(response.data.length);
      self.Details = response.data;
      console.log(self.Details);

    });

    Rep.repGetByCurDate(self.Name).then(function(response) {
      // console.log(response.data.length);
      self.report = response.data;
      console.log(self.report);
    });
  }

The template file uses the following Details as follows:-

<div class="container">
<div>
<h1>Reports</h1>
<tr ng-repeat="a in $ctrl.Details">
  <th><h4>UI Url: <a>{{a.url}}</a></h4></th>
  <th><h4>Host IP: {{a.IP}}</h3></th>
  <th><h4>Release: {{a.mode}}</h3></th>
</tr>
</div>
<div>
<table class="table table-bordered table-hover data-filter-control="true" " >
  <thead>
    <tr>
      <th>#</th>
      <th>Screen ID</th>
      <th>Mast ID</th>
      <th>Description</th>
      <th data-filter-control="select">Result</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="result in $ctrl.report">
      <th></th>
      <th>{{result.ScreenID}}</th>
      <th><a href="#!/reports/{{result._id}}">{{result.MastID}}</a></th>
      <th>{{result.Description}}</th>
      <th><span ng-class="{
          'color-red': result.result === 'Failed',
          'color-green': result.result === 'Passed'}">{{result.result}}
  </span></th>
    </tr>
  </tbody>
 </table>
 </div>
 </div>

The Factory Rep is defined as :-

factory('Rep', ['$http',
function($http) {
  return {
    repGetByCurDate : repGetByCurDate
    envGetSingle: envGetSingle
  };

  function envGetSingle(envName) {
    return $http.get('/api/envs/currDate/' + envName + '/envDetails').then(complete).catch(failed);
  }

  function repGetByCurDate(envName) {
    return $http.get('/api/envs/currDate/' + envName).then(complete).catch(failed);
  }

  function complete(response) {
    return response;
  }

  function failed(error) {
    console.log(error.statusText);
  }
}

])

The factory returns the appropriate data. The problem happens when I try to access self.Details in the angular template file. The self.report has values but self.Details is empty. How can I persist object in self.Details as well?

Answer 1

Turns out the Details variable is a single element in an array. So to access it we use a[0].url instead of a in the template file. This resolved the issue.