JSFiddle - React, Tailwind, and code Playground

by Shital Agarwal

HTML

<body ng-app="myApp">
    <div ng-controller="MainCtrl">
        <ul class="module_list" ng-controller="CheckedController">
            <li ng-repeat="module in modules">
                <div class="span4 module_card" ng-class="{ checked : isChecked == module.title , unChacked: isChecked != module.title}">
                    <input id="{{module.title}}" type="radio" name="radio" class="custom_checkbox" ng-click="checked(module.title)" ng-value="module.title">
                    <label class="title" for="{{module.title}}">{{module.title}}</label>
                    <p>{{module.description}}</p>
                    <p>{{isChecked}}</p>
                    <p><a class="btn btn_addlearning" ng-class="getCardButtonClass(module)" ng-click="addToMyLearning(module)">{{createButtonText(module)}}</a>

                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>

CSS

.checked {
    background: LightBlue;
}
.unChacked {
    background: #fff;
}

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 = '';
    $scope.checked = function(title) {
         $scope.isChecked = title;
    }
});