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 {
    restrict: "E",
    scope: true,
    templateUrl: "partials/app-nav.html",
    controller: function($scope, $attrs) {
      $scope.$watch($attrs.data, function(value) {
        if (value) {
          $scope.data = value;          
        }
      });
    }
  };
});

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