JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp" ng-controller="Object">
  <div ng-repeat="mow in check.BankDataParent.mows">
    <div class="checkbox">
      <input type="checkbox" ng-model="mow.selected" name="cbmow{{mow.id}}" />
      <label for="cbmow{{mow.id}}"></label>
    </div>
    <i class="fa fa-exclamation-triangle" style="color:red;" title="{{mow.errorInputAmountTitle}}" ng-show="mow.selected && mow.errorInputAmountTitle"></i>
    <input type="text" ng-model="mow.inputAmount" size="8" ng-show="mow.selected" /> {{mow.displayField}}
    <a href="/{{mow.id}}" target="_blank">
      <i class="fa fa-external-link"></i>
    </a>
  </div>
</div>

CSS

.checkbox {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
  margin: 0px 10px -5px 0;
}

.checkbox input[type="checkbox"] {
  opacity: 0;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1070;
  cursor: pointer;
}

.checkbox label {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  border: 1px solid #eee;
  border-radius: 3px;
}

.checkbox input[type="checkbox"]:checked + label {
  background-image: url("../images/icons.png");
}

JavaScript

var app = angular.module("myapp", []);
app.controller('Object', function($scope) {
  $scope.check.BankDataParent.mows = [{
    selected: true,
    id: 1,
    errorInputAmountTitle: "tes",
    inputAmount: 23
  }, {
    selected: false,
    id: 2,
    errorInputAmountTitle: "sed",
    inputAmount: 45
  }, {
    selected: true,
    id: 3,
    errorInputAmountTitle: "sds",
    inputAmount: 33
  }];
});