For horizontal ng-repeat, how to remove spaces between elements and sync it up with a second ng-repeat

Question

I'm trying to print out an ng-repeat without all the space in between the elements. I want it to be about half as much as there is right now.

I also need it to be in sync with another ng-repeat below it.

How do I get this to happen? Here it is right now:

$scope.profileCompare = {

  You: {
    questionAnswer: [false, true, false, false, false, false],
    percent: ['20%', '40%', '60%', '80%', '100%'],
    questionImportance: "Unimportant"
  },
  Pizza: {
    questionAnswer: [true, false, false, false, false, false],
    percent: ['20%', '40%', '60%', '80%', '100%'],
    questionImportance: "Important"
  },
  Greenie: {
    questionAnswer: [false, true, false, false, true, false],
    percent: ['20%', '40%', '60%', '80%', '100%'],
    questionImportance: "Very Important"
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

<script src="https://code.jquery.com/jquery.min.js"></script>

<div>
  <div ng-repeat="(key, value) in profileCompare">
    <p>{{value.questionImportance}}</p>
    <ul class="comparison-list">
      <li ng-repeat="answer in value.questionAnswer track by $index" style="position:relative; display:block; float:right" class="fa-li fa" ng-class="{green:answer, red:!answer, 'fa-check-square':answer, 'fa-square':!answer}">
      </li>
      <br>
      <li ng-repeat="percent in value.percent track by $index" style="position:relative; float:right">
        {{percent}}
      </li>
      <br>
      <br>
    </ul>
  </div>
</div>

I need to shrink the space between the elements on both of them, and get the first ng-repeat of answer in value.questionAnswer to sync up to be right above the second one percent in value.percent. As it is now, it's offset about one element to the left.

Answer 1

I think the problem to get a proper styling is that answer and percent array have different length. It would be easier if you could make them same size. (e.g. both 5 items).

Anyway, if you need them like they are you could do it with a table (as proposed in the comments). To make them look nicer you can add a colspan=2 to a percent cell. Required because of the different length.

Please have a look at the demo below or this jsfiddle.

angular.module('demoApp', [])
    .controller('mainController', function ($scope) {
    $scope.profileCompare = {

        You: {
            questionAnswer: [false, true, false, false, false, false],
            percent: ['20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Unimportant"
        },
        Pizza: {
            questionAnswer: [true, false, false, false, false, false],
            percent: ['20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Important"
        },
        Greenie: {
            questionAnswer: [false, true, false, false, true, false],
            percent: ['20%', '40%', '60%', '80%', '100%'],
            questionImportance: "Very Important"
        }
    }
});

td {
    text-align: center;
    /*border: 1px solid black;*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <div ng-repeat="(key, profile) in profileCompare">
        <p>{{profile.questionImportance}}</p>
        {{key}}
        <table>
            <tr>
                <td ng-repeat="answer in profile.questionAnswer track by $index"><i class="fa" ng-class="{green:answer, red:!answer, 'fa-check-square':answer, 'fa-square':!answer}"></i></td>
            </tr>
            <tr>
                <td ng-repeat="percent in profile.percent track by $index" colspan="{{$index == 0? 2: ''}}">
                    {{percent}}</td>
            </tr>
        </table>
    </div>
</div>