JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<link rel="stylesheet" href="http://st.pimg.net/cdn/libs/bootstrap/2.2/css/bootstrap.min.css">
<script src="http://st.pimg.net/cdn/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://st.pimg.net/cdn/libs/bootstrap/2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<br>

<strong>myModel: </strong>
<code>  {{myModel}}   </code>

<hr>

<div>
    <input name="test" type="radio" ng-model='myModel' value="Left" > Left<br>
    <input name="test" type="radio" ng-model='myModel' value="Middle" > Middle<br>
    <input name="test" type="radio" ng-model='myModel' value="Right" > Right<br>    
</div>

<hr>

<buttons-radio class="btn-group" data-toggle="buttons-radio" model='myModel' options='myOptions'></buttons-radio>

JavaScript

"use strict";

function Main($scope) {
    $scope.myOptions = ["Left", "Middle", "Right"];
    $scope.myModel = "Left"
    
    $scope.$watch('myModel', function(v){
        console.log('changed', v);
    });
}

angular.module('buttonsRadio', [])
       .directive('buttonsRadio', function() {
        return {
            restrict: 'E',
            scope: { model: '=', options:'='},
            controller: function($scope){
                $scope.activate = function(option){
                    $scope.model = option;
                };      
            },
            template: "<button type='button' class='btn' "+
                        "ng-class='{active: option == model}'"+
                        "ng-repeat='option in options' "+
                        "ng-click='activate(option)'>{{option}} "+
                      "</button>"
        };
    });