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="hello-world">

  <script type="text/ng-template"  id="partials/app-nav.html">
    
      <span>data:{{data}}</span><br>
      <span>firstName:{{data.firstName}}</span><br>
      <span>lastName:{{data.lastName}}</span><br>
   
  </script>

  <div ng-controller="MyCtrl">
    <app-nav data="testData"></app-nav>
  </div>
    
    
</div>

JavaScript

var helloWorld = angular.module('hello-world', []);

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

function MyCtrl($scope) {
    $scope.testData = { firstName:"Brett", lastName:"Coffin" };
}