JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="tcpApp">
      <div ng-controller="MainCtrl">
      <div class="progName">
                <div class="swiper"></div>
                <program-name name="{{appName.title}}" data-page="Home" index="{{$index}}" ng-repeat="appName in appNames"></program-name>
            </div>

      </div>
    </div>

CSS

/* Styles go here */
.t0{width:200px;height:200px;background-color:gray;}
.t1{width:200px;height:200px;background-color:yellow;}
.t2{width:200px;height:200px;background-color:green;}

JavaScript

// Code goes here
"use strict";
angular.module('tcpApp', [])
.controller('MainCtrl', function($scope) {
  $scope.appNames=[{title:'titre1'},
                   {title:'titre2'},
                   {title:'titre3'}];
  
})
.directive('programName', function ( $compile ) {
        return {
            restrict    : 'AE',
            replace     : true,
            scope       : {
                            name:'@',
                            index:'@'
                        },

            link        : function (scope, element, attr) {
                            scope.callMe = function () {
                                console.log($(element).prop('class'));
                            }

                            var getTemplate = function( index ) {
                              return Number(index) ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>';
                             }

                             element.html(getTemplate(scope.index));

                            $compile(element.contents())(scope);
                        }
        }
    })