title: Unable to pass json row in dynamically created table using angular JS
body: <p>I'm creating a table dynamically using Angular JS. In my table, I have to pass JSON row. But when it renders it's showing error !</p>
  
  <p><strong>Error: [$parse:syntax] Syntax Error: Token 'Object' is unexpected, expecting []] at column 9 of the expression [[object Object] | QcDetailsManualAuto] starting at [Object] | QcDetailsManualAuto].</strong></p>
  
  <p>CODE :</p>
  
  <pre><code>var jData = JSON.parse(response.data);
               var vQCTableData = jData.ResultData;
              var vQCTable = '';
              vQCTable += "&lt;table class=\"table table-striped table-bordered table-hover\" id=\"qctable\"&gt;";
              vQCTable += "&lt;thead&gt;";
              vQCTable += "&lt;tr&gt;";
              vQCTable += "&lt;th&gt;SOM&lt;/th&gt;";
              vQCTable += "&lt;th&gt;EOM&lt;/th&gt;";
              vQCTable += "&lt;th&gt;Type of Error&lt;/th&gt;";
              vQCTable += "&lt;th&gt;QC Type&lt;/th&gt;";
              vQCTable += "&lt;th&gt;Remarks&lt;/th&gt;";
              vQCTable += "&lt;th&gt;Action&lt;/th&gt;";
              vQCTable += "&lt;/tr&gt;";
              vQCTable += "&lt;/thead&gt;";
              for(var td in vQCTableData)
              {                                                                                          
                  vQCTable += "&lt;tbody&gt;";
                  vQCTable += "&lt;tr class=\"wer1\" ng-if=\"" + vQCTableData[td] + " | QcDetailsManualAuto\"&gt;";
                  vQCTable += "&lt;td&gt;" +vQCTableData[td].SOM+ "&lt;/td&gt;";
                  vQCTable += "&lt;td&gt;" +vQCTableData[td].EOM+ "&lt;/td&gt;";
                  vQCTable += "&lt;td&gt;" +vQCTableData[td].Parameter+ "&lt;/td&gt;";
                  vQCTable += "&lt;td&gt;" +vQCTableData[td].QCType+ "&lt;/td&gt;";
                  vQCTable += "&lt;td&gt;" +vQCTableData[td].Remarks+ "&lt;/td&gt;";
                  vQCTable += "&lt;td class=\"MediaDataListPointer\"&gt;";
                  vQCTable += "&lt;span ng-click=\"QCParameterEdit(" + vQCTableData[td] + ")\" title=\"Edit\" class=\"glyphicon glyphicon-pencil QualityCheckIcons\"&gt;&lt;/span&gt;";
                  vQCTable += "&lt;span ng-click=\"DeleteMQC(" + vQCTableData[td] + ")\" title=\"Delete\" class=\"glyphicon glyphicon-trash QualityCheckIcons\"&gt;&lt;/span&gt;";
                  vQCTable += "&lt;/td&gt;";
                  vQCTable += "&lt;/tr&gt;";
                  vQCTable += " &lt;/tbody&gt;";
              }
              vQCTable += "&lt;/table&gt;";
  
              var mediadiv = angular.element(document.querySelector('#mediadiv'));
              mediadiv.html($compile(vQCTable)($scope));
  </code></pre>
  
  <p>In <strong>[response]</strong> I m getting data after calling URL.</p>
  
  <p><strong>QCParameterEdit</strong> function require json row for its functionality</p>
  
  <pre><code>    $scope.QCParameterEdit = function (data) {
      $("#GenerateMarksModal").modal();
      $scope.QCPDRButton = "Update";
      $scope.somModel = data.SOM;
      $scope.eomModel = data.EOM;
      $scope.qCParameterModel = data.QcParamUID;
      $scope.typeOfErrorModel = data.Type;
      $scope.typeModel = data.Type;
      $scope.remarksModel = data.Remarks;
      $scope.UID = data.UID;
      $scope.QcParameterIUDSuccess = false;
      $scope.QcParameterIUDFailure = false;
      $scope.QcParameterIUDSMessage = '';
      $scope.QcParameterIUDFMessage = '';
  };
  </code></pre>
  
  <p><strong>QcDetailsManualAuto</strong> is angular custom filter [Can not change it because it being used at multiple places]</p>
  
  <pre><code>app.filter('QcDetailsManualAuto', function () {
  return function (value) {
      var result = false;
      if (value.QCType == 'Auto' || value.QCType == 'Manual') { result = true; }
      return result;
  };
  });
  </code></pre>
  
  <p>Thanks in Advance!</p>