Untitled

<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <style>
        input[type=checkbox],
        input[type=radio] {
            width:25px!important;
            display:inline-block;
            float:left;
            margin-top:0!important;
            opacity:0;
            margin-right:10px;
            position:relative;
            z-index:5;
        }

        input[type=checkbox] + label,
        input[type=radio] + label {
            width:calc(100% - 35px)!important;
            margin-left:0!important;
            margin-right:0!important;
            display:inline-block;
            float:left;
        }

        input[type=checkbox] + label:before,
        input[type=radio] + label:before  {
            content:'';
            left:-36px;
            top: 0;
            z-index:-1;
            right:0;
            color:green;
            position:absolute;
            border:2px solid #222;
            width:25px;
            height:25px;
            padding:4px;
        }

        input[type=radio] + label:before  {
            border-radius:100%;
            left:-37px;
        }

        input[type=checkbox]:checked + label:before,
        input[type=radio]:checked + label:before  {
            border-color:green;
        }

        input[type=checkbox]:checked + label:after,
        input[type=radio]:checked + label:after {
            content:'\f00c';
            font-family:'FontAwesome';
            font-size:25px;
            left:-36px;
            top: 0;
            z-index:-5;
            right:0;
            position:absolute;
            color:green;
        }

        input[type=radio]:checked + label:after {
            content:'\f111';
            font-size:18px;
            left:-32px;
        }

        .form-group input[type=checkbox]  ,
        .form-group input[type=radio] {
        z-index:20;
        opacity:0;
        }

        .form-group input[type=checkbox] + label ,
        .form-group input[type=radio] + label {
        z-index:10;
        }

        table tr td input[type=checkbox]:checked + label:after,
        table tr td input[type=radio]:checked + label:after {
        top:5px;
        }

         input[type=radio]:checked + label.eval-pass:before,
        input[type=radio] + label.eval-pass:before{
             border-color:#1F7F44;
         }

        label.eval-pass,
        input[type=radio]:checked + label.eval-pass:after {
             color:#1F7F44;
         }

         input[type=radio]:checked + label.eval-fail:before,
        input[type=radio] + label.eval-fail:before{
             border-color:#D80B0B;
         }

        label.eval-fail,
        input[type=radio]:checked + label.eval-fail:after {
             color:#D80B0B;
         }

          input[type=radio]:checked + label.eval-na:before,
        input[type=radio] + label.eval-na:before{
             border-color:#0E5A81;
         }

        label.eval-na,
        input[type=radio]:checked + label.eval-na:after {
             color:#0E5A81;
         }

          input[type=radio]:checked + label.eval-caution:before,
        input[type=radio] + label.eval-caution:before{
             border-color:#979700;
         }

        label.eval-caution,
        input[type=radio]:checked + label.eval-caution:after {
             color:#979700;
         }

          form label, form label.control-label {
            font-weight: 700;
            font-size: 0.9em;
            font-family: "avenir-medium";
            width: 100%;
            position: relative;
        }
    </style>
</head>

<body>

<div ng-app="myApp">
  <div ng-controller="myController">
    <form>
      <fieldset data-ng-repeat="s in sections">
        <div class="form-group">
          <div class="col-md-12">
            <h2>[[s.name]]</h2>
          </div>
        </div>

        <!-- Field Item -->
        <div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
          <div class="col-md-12 m-b-30">
            <h4>[[ f.name ]]</h4>
            <input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
          </div>

          <div class="col-sm-3" data-ng-repeat="v in values">
            <input type="radio" name="section-[[s.section]]-field-[[f.field]]" ng-value="v.value" class="form-control" data-ng-model="f.field_condition">
            <label class="eval-[[ v.internal ]]"><i class="fa" ng-class="v.classes"></i> [[ v.external ]]</label>
          </div>
          [[ f.field_condition ]]
        </div>
        <hr>
      </fieldset>
    </form>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>

var app = angular.module("myApp", []);

app.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

app.controller("myController", ['$scope', function($scope) {
  $scope.values = [{
    value: 'pass',
    external: 'Pass',
    internal: 'pass',
    classes: 'green fa-check-circle'
  }, {
    value: 'fail',
    external: 'Fail',
    internal: 'fail',
    classes: 'red fa-exclamation-circle'
  }, {
    value: 'n/a',
    external: 'N/A',
    internal: 'na',
    classes: 'blue fa-circle'
  }, {
    value: 'caution',
    external: 'Caution',
    internal: 'caution',
    classes: 'yellow fa-exclamation-triangle'
  }]

  $scope.sections = [{
        name: 'Section 1*',
        section: 1,
        fields: [{
          field_condition: 'pass',
          name: 'Field1',
          field: 1
        }, {
          field_condition: 'fail',
          name: 'Field2',
          field: 2
        }]
      }, {
        name: 'Section 2',
        section: 2,
        fields: [{
          field_condition: 'n/a',
          name: 'Field3',
          field: 3
        }, {
          field_condition: 'caution',
          name: 'Field4',
          field: 4
        }]
      }];
}]);


</script>
</body>
</html>