Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="Controller as ctrl">
    <div class='btn-group' ng-model='ctrl.animal'>
        <div class='btn' radio-value='"Dog"'>Dog</div>
        <div class='btn' radio-value='"Cat"'>Cat</div>
        <div class='btn' radio-value='"Pig"'>Pig</div>
    </div>
    <h2>{{ctrl.animal}}</h2>
</div>

CSS

.btn {
    height: 20px;
    width: 50px;
    margin: 2px;
    background: #DDD;
    text-align: center;
    float: left;
}

.btn.selected {
    background: red;
}

h2 {
    clear: both;
}

JavaScript

var app = angular.module('myApp',[]);

  app.directive('radioValue', function () {
    return {
      restrict: 'A',
      require: '^ngModel',
      scope: {
        radioValue: '='
      },
      link: function (scope, elem, attrs, ngModelCtrl) {
        elem.on('click', function () {
          scope.$apply(function () {
            ngModelCtrl.$setViewValue(scope.radioValue);
          });
        });
        scope.$watch(function() {
          return ngModelCtrl.$modelValue;
        }, function(newVal) {
          elem.toggleClass('selected', newVal === scope.radioValue);
        });
      }
    };
  });
function Controller($scope) {
    this.animal = 'none';
}