JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
    <div ng-controller="myctrl">
        <div class="pull-left" btn-switch ng-model="v1['status']">
	        <div class="pull-left btnCS btnOff" text="{{v1['btn1']}}">&nbsp;</div>
            <div class="pull-left btnCS btnOn btnOnSelected" text="{{v1['btn2']}}"></div>
		</div>
        <div class="clearFix" style="height:20px"></div>
        <hr />
         <div class="pull-left" btn-switch ng-model="v2['status']">
	        <div class="pull-left btnCS btnOff" text="On">&nbsp;</div>
            <div class="pull-left btnCS btnOn btnOnSelected" text="Off"></div>
		</div>
    </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){
    $scope.v1={
        "status":"1",
        "btn1":"On",
        "btn2":"Off"
    }
     $scope.v2={
        "status":"1"
     }
});
angular.module('test').directive('btnSwitch', function($compile){
    
  return {
    restrict : 'AE',
    require :  'ngModel',
    link : function(scope, element, attrs, ngModel){
                   
        $compile((element).contents())
        ngModel.$render = function() {
          render();
        };
        
        var render=function(){
          var val = ngModel.$viewValue; 
          
          var open=angular.element(element.children()[0]);
            
          var closed=angular.element(element.children()[1]);
		  if(val)
		  {
			closed.html(closed.attr("text"));
			closed.addClass('btnOnSelected');  
			open.html("&nbsp;");
			open.removeClass('btnOffSelected');  
		  }
		  else{
			  open.html(open.attr("text")); 
			  open.addClass('btnOffSelected');  
			  closed.removeClass('btnOnSelected');  
			  closed.html("&nbsp;");
		  }
        };
        
       
        element.bind('click', function() {
          scope.$apply(toggle);             
        });
                   
       
        function toggle() {
           var val = ngModel.$viewValue;
           ngModel.$setViewValue(!val); 
           render();          
        } 
        
        if(!ngModel){  
          
          return;          
        }  
         render();
    }
  };
});