JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
    <div ng-controller="myctrl">
         <startstop></startstop>
    </div>
</div>

CSS

.status:hover {
    cursor: pointer;
    color: blue;
}
.pull-left{
float:left; 
}
.btnCS{
	padding: 0 10px;
    text-align: center;
    width: auto;
	cursor: pointer;
 -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	
}
.btnOn{
    background-color: #868686;
    /* border: 1px solid #BFBFBF; */
    border-radius: 0px 5px 5px 0px;
    
}
.btnOnSelected{
    margin-left: -3px;    
    border-radius: 5px 5px 5px 5px;
    padding-right: 13px;
    color:#F4F4F4;
}
.btnOff{
    background-color: #E9E9E9;
    /* border: 1px solid #BFBFBF; */
    border-radius: 5px 0px 0px 5px;
   
}
.btnOffSelected{
    margin-right: -3px;  
    border-radius: 5px 5px 5px 5px;
    padding-left: 13px;
    position: relative;
}
.clearFix{
    clear:both;
    
}

JavaScript

angular.module('test', []);
angular.module('test').controller('myctrl', function($scope){
});
angular.module('test').directive('startstop', function() {
      return {
        restrict: 'E',
        replace:true,
        template: '<input type="button" value="start" class="btn btn-success btn-lg">',
        link: function(scope, elem, attrs) {
          elem.bind("click", function(){
            console.log('startstop clicked', elem)
            if(elem.val() == "start") {
               elem.val("stop");   
            }
            else {
               elem.val("start");
            }
              //scope.$apply()
          })
        }
      }
   });