Directives

HTML

<div ng-app="app" ng-controller="Controller as ctrl">
  <ul>
    <li ng-repeat="item in ctrl.items">{{item.name}}:
      <item index="{{$index}}"></item>
    </li>
  </ul>
</div>

JavaScript

angular
  .module('app', [])
  .controller('Controller', Controller)
  .directive('item', item);

function Controller() {
  var vm = this;
  vm.items = [{
    name: 'item 1'
  }, {
    name: 'item 2'
  }, {
    name: 'item 3'
  }, {
    name: 'item 4'
  }];
}

function item() {
  var directive = {
    template: '<div>Content: {{content}}</div>',
    scope: {
      index: '@'
    },
    restrict: 'E',
    link: link
  };

  return directive;

  function link(scope, element, attr) {
    scope.content = (scope.index > 1) <div>Hello<div>
  }
}