Ng-repeat, first item with different directive

You can use ng-repeat-start and ng-repeat-end as follows:

angular.module('example', [])
  .controller('ctrl', function Ctrl($scope) {
    $scope.items = [1, 2, 3];
  })
  .directive('big', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.css('font-size', '30px');
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="example" ng-controller="ctrl">
  <div ng-repeat-start="item in items" ng-if="$first" big>
    big item {{item}}
  </div>
  <div ng-repeat-end ng-if="!$first">
    item {{item}}
  </div>
</div>

The documentation can be found under ng-repeat.

See this fiddle http://jsfiddle.net/nicolasmoise/xLfmK/2/.

You can create one directive to which you pass a condition. Depending on that condition it will either display the square or the big-square as such.

         <div ng-repeat="repeat in repeater" condition="$first" square></div>

Note If you don't want to alter the directives you're already made, you can always have square be a master directive that calls the other two.

If you don't mind using another <div> inside of your <li>, you should be able to get away with doing conditional blocks of <div> using ng-if="$index == ??".

Maybe something like this:

<div ng-repeat="i in placeholders">
  <div bigsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 0">
    ...
  </div>
  <div mediumsquare class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index == 1">
    ...
  </div>
  <div square class="set-holder {{i.class}}" droppable="{{i.type}}" ng-if="$index > 1">
    ...
  </div>
</div>

It's a little more verbose, but it nicely separates out the templates so that you can have them pretty independent of each other.