JSFiddle - React, Tailwind, and code Playground

by _anil

HTML

<div data-ng-app="myapp">
    
<div ng-controller="myCtrl">
    <span>{{heading}}</span>
    <div ng-repeat="tab in tabs">
       <bx-slider outs="{{ tab.data }}" /> 
       
    </div>
</div></div>

JavaScript

var myApp = angular.module('myapp',[]);
myApp.directive('bxSlider',function(){
     return {
          restrict : 'EA',
                    template : "<div>{{outs.name }}</div>",
          replace: true,
          scope: {
                outs : "="
          }
    }
});
myApp.controller('myCtrl', function($scope){

                $scope.outfit = {
                    name : 'guess',
                    price : '100$'
                };

                $scope.myLook= {
                    name : 'guess',
                    price : '100$'
                };

                $scope.tabs = [
                    { title:"THE RUNWAY" , data : 'outfit'},
                    { title:"MY LOOK",  data : 'myLook'},
                ];
                    });