JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<!doctype html>
<html>
    <head></head>
<body ng-controller="foo">
    <radio-buttons options="optionsList" ng-model="myModel"></radio-buttons>
    <h1>Model: {{myModel}}</h1>
</body>
</html>

JavaScript

var myApp = angular.module('myApp', []);
angular.element(document).ready(function() {
   angular.bootstrap(document, ['myApp']);
});

function foo($scope, $timeout) {
  $scope.optionsList = [
        {value: "ACT", label: "Activity"},
        {value: "ACTSTATUS", label: "Activity & Status"},
        {value: "TOTALS", label: "Totals"}
    ];

    $scope.myModel = "ACT";
    
    $timeout(function() {
       $scope.myModel = "TOTALS"; 
    }, 2000);
}

myApp.directive('radioButtons', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            options: '=',
            model: '=ngModel'
        },
        template:   '<div class="btn-group">' +
                        '<a href="javascript:void(0)" class="btn" ng-class="{true:\'active\', false:\'\'}[selectedValue==option.value]" ng-repeat="option in options" ng-click="select(scope, option.value)" value="{{option.value}}">{{option.label}}</a>' +
                    '</div>',
        replace: true,
        link: linker
    }

    function linker(scope, element, attrs, ngModel) {
        scope.select = select;
        scope.scope = scope;
        scope.selectedValue = "ACT";
        
        ngModel.$formatters.unshift(function(modelValue) {
            console.log('your new model value is: ' + modelValue);
            scope.selectedValue = modelValue;
        });
    }

    function select(scope, val) {
        scope.selectedValue = val;
        scope.model = val;
    }
});