JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.js"></script>
<div ng-app="hella">

  <script type="text/ng-template"  id="partials/app-nav.html">
    <li ng-repeat="slide in data()">
      <a href="{{slide.route}}"><span>test {{slide.route}}</span> </a>
    </li>
  </script>

  <div ng-controller="HellaCtrl">
    <app-nav data="routes"></app-nav>
  </div>
</div>

JavaScript

var hella = angular.module('hella', []);

hella.directive('appNav', function() {
  return {
    scope: {
      data: 'accessor'
    },    
    restrict: "E",
    templateUrl: "partials/app-nav.html"
  };
});

function HellaCtrl($scope) {
  $scope.routes = [
    {route: 1},
    {route: 2},
    {route: 3},
    {route: 4}
  ];
}