title: Angular -fill one column based on server response
body: <p>I'm new to angular so sorry if this is a very basic question.</p>
  
  <p>I built a client-server app, that allows to upload files, then validates them (some internal rules) and returns log file in case the validation failed.</p>
  
  <p>I'm using <a href="https://github.com/nervgh/angular-file-upload" rel="nofollow">Angular File Upload</a> module for the client side, the <a href="https://github.com/nervgh/angular-file-upload/tree/master/examples/simple" rel="nofollow">simple</a> example.</p>
  
  <p>The response from server looks like this (JSON)</p>
  
  <pre><code>{"status":"FAILED","entity":"download/logs/24f307d3-8964-4a5b-8d66-0763503892b1/","errors":[]}
  </code></pre>
  
  <p>What I want to do is to upload the download link (from response.entity) for every file.</p>
  
  <p>What I get is same link for all files (the one from the last file)</p>
  
  <p>When I check what is happening in debug mode (F12) I do see that the parameters are changing but somehow they are being overridden with the last one.</p>
  
  <p>I think that I have to use ng-repeat somehow, but the thing is that it is already being used for other columns.</p>
  
  <p>Please help.</p>
  
  <p>MY html table:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th width="50%"&gt;Name&lt;/th&gt;
        &lt;th ng-show="uploader.isHTML5"&gt;Size&lt;/th&gt;
        &lt;th ng-show="uploader.isHTML5"&gt;Progress&lt;/th&gt;
        &lt;th&gt;Status&lt;/th&gt;
        &lt;th align="justify"&gt;Actions&lt;/th&gt;
        &lt;th&gt;Valid&lt;/th&gt;
        &lt;th&gt;Log&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="item in uploader.queue"&gt;
        &lt;td&gt;{{ item.file.name }}&lt;/td&gt;
        &lt;td ng-show="uploader.isHTML5" nowrap&gt;{{ item.file.size/1024/1024|number:2 }} MB&lt;/td&gt;
        &lt;td ng-show="uploader.isHTML5"&gt;
          &lt;div class="progress" style="margin-bottom: 0;"&gt;
            &lt;div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td class="text-center"&gt;
          &lt;span ng-show="item.isSuccess"&gt;&lt;i class="glyphicon glyphicon-ok"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;span ng-show="item.isCancel"&gt;&lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;&lt;/span&gt;
          &lt;span ng-show="item.isError"&gt;&lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;/td&gt;
        &lt;td nowrap&gt;
          &lt;button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"&gt;
            &lt;span class="glyphicon glyphicon-upload"&gt;&lt;/span&gt; Upload
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"&gt;
            &lt;span class="glyphicon glyphicon-ban-circle"&gt;&lt;/span&gt; Cancel
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()"&gt;
            &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Remove
          &lt;/button&gt;
        &lt;/td&gt;
        &lt;td ng-show="item.isSuccess"&gt;
          {{this.uploader.validationStatus }}
        &lt;/td&gt;
        &lt;td ng-show="uploader.showLog"&gt;
          &lt;a href={{this.uploader.logURL}} target="_blank"&gt;Log&lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>I'm talking about 2 last columns:</p>
  
  <pre><code>  &lt;td ng-show="item.isSuccess"&gt;
      {{this.uploader.validationStatus }}
    &lt;/td&gt;
    &lt;td ng-show="uploader.showLog"&gt;
      &lt;a href={{this.uploader.logURL}} target="_blank"&gt;Log&lt;/a&gt;
    &lt;/td&gt;
  </code></pre>
  
  
  
  <p>I did the following change in the controller.js file:</p>
  
  <pre class="lang-js prettyprint-override"><code>uploader.onCompleteItem = function(fileItem, response, status, headers) {
      console.info('onCompleteItem', fileItem, response, status, headers);
      var resp = JSON.stringify(response.entity);
  
      if (resp == "\"Success\"") {
        this.validationStatus = "Yes";
        this.showLog = false;
      } else {
        this.validationStatus = "No";
        this.logURL = resp.replace(/\"/g, "");
        this.showLog = true;
      }
  </code></pre>
  
  
  
  <p><strong>The solution:</strong></p>
  
  <p>changes in controllers.js file:</p>
  
  <pre class="lang-js prettyprint-override"><code>uploader.onCompleteItem = function(fileItem, response, status, headers) {
    console.info('onCompleteItem', fileItem, response, status, headers);
    if (response.status === 'FAILED') {
      fileItem.validationStatus = "No";
      fileItem.logUrl = response.entity;
      fileItem.showLog = true;
  
    } else {
      fileItem.validationStatus = "Yes";
      fileItem.showLog = false;
    }
  };
  </code></pre>
  
  
  
  <p>Changes in html file:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;td ng-show="item.isSuccess" ng-class="{green: item.validationStatus == 'Yes', red: item.validationStatus == 'No'}"&gt;
    {{item.validationStatus}}
  &lt;/td&gt;
  &lt;td ng-show="item.showLog"&gt;
    &lt;a href={{item.logUrl}} target="_blank"&gt;Log&lt;/a&gt;
  &lt;/td&gt;
  </code></pre>