JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.8/angular-animate.min.js"></script>
<div ng-app="myApp">
     <div ng-controller='ctrl'>
         <div ng-repeat="repeat in repeater" >
             {{repeater[0]}} - {{repeat}}
         </div>
         <div class="square"></div>
    </div>
</div>

JavaScript

angular.module('myApp',[])

.controller('ctrl', function ($scope){
      $scope.repeater=['foo', 'bar'];
  })

.directive('square', [function(){
    return {
        restrict: 'A',
        replace: true,
        terminal: true,
        scope: {
            'condition': '='
        },
        link: function(scope, element, attrs){
            if(scope.condition){
                element.text('big square');
            }
            else {
                element.text('square');
            }
        }
    };
}]);