Angular: button-group + highlight-changes

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-controller="MyCtrl">
  
  <br>
    
  <button-group
    states="modes" 
    state="mode"
    on-state-change="onModeChange">
  </button-group>

  <br>
    
  <span highlight-changes value="mode"></span>
  
  <br><br><br>
    
  <button-group
    states="periods" 
    state="period"
    on-state-change="onPeriodChange">
  </button-group>
    
  <br>
    
  <span highlight-changes value="period"></span>
    
</div>

JavaScript

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

myApp.directive('buttonGroup', function(){
  return {
    restrict: 'E',
    scope: {
      states: '=',
      state: '=',
      onStateChange: '='
    },
    template: '<div class="btn-group">' +
                '<button class="btn" ng-repeat="s in states" ng-click="select(s, $event)">' +
                    '{{s}}' + 
                '</button>' +
            '</div>',
    replace: true,
    controller: function($scope, $element){
      
        // Make sure that style is applied to initial state value
        $scope.$watch(function () {
            return $($element).find('.btn').length; // it checks if the buttons are added to the DOM
        }, function (newVal) {
            // it applies the selected style to the currently defined state, if any
            if (newVal > 0) {
                $($element).find('.btn').each(function(index, elm){
                    if ($(elm).text() == $scope.state) $(elm).addClass('btn-primary');
                });
            }
        }, true);

        // Apply style changes according to selection
        $scope.select = function(s, evt){  
            $scope.state = s;

            $($element).find('.btn').removeClass('btn-primary'); // reset styles on all buttons
            angular.element(evt.srcElement).addClass('btn-primary'); // apply style only to selected button
        };


        // Execute callback if it was provided
        $scope.$watch('state', function(){
            if ($scope.onStateChange){
              $scope.onStateChange();
            }
        }, true);
    }
  };
});



function MyCtrl($scope) {
    $scope.name = 'Superhero';
    
    $scope.modes = [
    "left",
    "center",
    "right"
  ];
  
  $scope.mode = "left";
  
  $scope.onModeChange = function(){
    
  };
  
  $scope.periods = [
    "Daily",
    "Weekly",
    "Monthly",
    "Yearly"
  ];
  
  $scope.period = "Daily";
  
  
  $scope.onPeriodChange = function(){
    
  };
}