ng-class и ng-style

Данные директивы служат стилизации элементов. Объявим в контроллере два объекта: 

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>ng-class and ng-style</title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.tasks = [
                { action: "Buy flowers", complete: false },
                { action: "Go to gym", complete: false },
                { action: "Buy snickers", complete: true },
                { action: "Buy notebook", complete: false },
                { action: "Call friends", complete: false },
                { action: "Go to cinema", complete: false },
                { action: "Buy Big-Mac", complete: true },
                { action: "Buy a book", complete: false },
                { action: "Call mom", complete: false }
            ];
            $scope.buttonNames = ["Red", "Green", "Blue"];
            $scope.settings = {
                Columns: "Green",
                Rows: "Red"
            };
            //Columns исользуется для того, чтобы задать фон для колонки Done
            //Rows используется для того, чтобы задать цвет для строк <tr>
        });
    </script>
    <style>
        tr.Red {
            background-color: lightcoral;
        }
 
        tr.Green {
            background-color: lightgreen;
        }
 
        tr.Blue {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="tasksPanel" class="panel" ng-controller="studyCtrl">
        <h3 class="panel-header">Tasks List</h3>
        <div class="row well">
            <div class="col-xs-6" ng-repeat="(key, val) in settings">
                <h4>{{key}}</h4>
                <div class="radio" ng-repeat="button in buttonNames">
                    <label>
                        <input type="radio" ng-model="settings[key]" value="{{button}}"/>{{button}}
                    </label>
                </div>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Tasks</th>
                    <th>Done</th>
                </tr>
            </thead>
            <tr ng-repeat="task in tasks" ng-class="settings.Rows">
                <!--ng-class используется для того чтобы можно было динамически изменять CSS класс элемента,
                здесь используется свойсвто Row объекта settings в котором хранится название стиля "Red"--> 
                <td>{{$index + 1}}</td>
                <td>{{task.action}}</td>
                <td ng-style="{'background-color':settings.Columns}">
                <!--директива ng-style исользуется для того чтобы непосредственно в элементе задать несколько стилей
                которые могли бы изменятся динамически здесь используется свойство Columns объекта settings в котором хранится название стиля "Green"-->
                <!--использовать стили непосредственно в элементе это плохая практика, обычно для этого используются стили,
                но в AngularJS можно динамически изменять значения этих стилей что является преимуществом,
                тем не менее лучше и продуктивнее по прежнему использовать классы-->
                    {{task.complete}}
                </td>
            </tr>
        </table>
    </div>
</body>
</html>