JSFiddle - React, Tailwind, and code Playground
HTML
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<ul class="module_list">
<li ng-repeat="module in modules">
<div class="span4 module_card" ng-class="{ checked : isChecked == module.title }" ng-controller="CheckedController">
<input id="{{module.title}}" type="radio" name="radio" class="custom_checkbox" ng-model="isChecked" ng-value="module.title">
</div>
</li>
</ul>
</div>
</body>
CSS
.checked {
background: LightBlue;
}
JavaScript
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope) {
$scope.modules = [{
title: 'Module 1',
description: 'Description 1'
}, {
title: 'Module 2',
description: 'Description 2'
}, {
title: 'Module 3',
description: 'Description 3'
}];
});
app.controller('CheckedController', function ($scope) {
$scope.isChecked = false;
});