title: How to make a 2 dimensional comparison table in Angular JS
body: <p>I am working on creating a table similar to a multiplication Table: <a href="http://www.eco-pros.com/images/ClipArt-Graphics/multiplication-table.gif" rel="nofollow">http://www.eco-pros.com/images/ClipArt-Graphics/multiplication-table.gif</a> for some evaluations.</p>
  
  <p>The data will be coming from the API resource through a REST call using Restangular. Here's the code for the controller after the REST call:</p>
  
  <pre><code>getEvaluations.getList("evaluations?searchBy[participant]=880b6fb0-ee34-11e2-a62e-19e0bcac9427").then(function(data){
      evals = data["_embedded"]["items"];
  
      for (i = 0; i &lt; evals.length; i++){
          allEvals.push({
              rating: evals[i].rating,
              alternative: evals[i]["_embedded"]["alternative"].name,
              criterion: evals[i]["_embedded"]["criterion"].name
          }); 
          /* I'm creating an array of objects to parse the data that comes from the
             resource because the back-end is a bit messy. */
  
      }
      console.log(allEvals);
      $scope.evaluations = {
          eval: allEvals
      };
      $scope.projectID = $routeParams["projectID"];
  }, function error (err){
      alert("Error in fetching resource");
      console.log("error");
  });
  </code></pre>
  
  <p>In the view, I've got a table which I have no clue how to fill up.</p>
  
  <pre><code>&lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th data-ng-repeat="alternative in alternatives"&gt;{{alternative.name}}&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr data-ng-repeat="criterion in criteria"&gt;
              &lt;td&gt;&lt;b&gt;{{criterion.description}}&lt;/b&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" value="{{evaluations.rating}}" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>This is the old code for the table where I was using two REST calls to just get the alternative names and the criterion names to populate the table. But I want to be able to use the array of objects I created to populate that instead. And in the input boxes, I want the rating to go there that matches that specific alternative and criterion (so I need something like a conditional statement to check for AA or AB or AC, etc and inject the value for that). </p>
  
  <p>For Example:</p>
  
  <blockquote>
  <pre><code>  A1
  </code></pre>
    
    <p>C1  5.0</p>
  </blockquote>
  
  <p>Any tips or help will be appreciated! Thank you. I'm not sure how to make this question clearer since it's so different.</p>
  
  <p>JS fiddle (not working): </p>
  
  <p><a href="http://jsfiddle.net/GkxeP/8/" rel="nofollow">http://jsfiddle.net/GkxeP/8/</a></p>