<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js" type="text/javascript"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular-route.js" type="text/javascript"></script>
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="TasksIndexCtrl">
    <div class="container">
      <ng-view></ng-view>
    </div>
  </body>

</html>
angular.module('plunker', ['ngRoute'])

.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider
      .when('/tasks', { templateUrl: '_tasks.html', controller: 'TasksIndexCtrl' })
      .when('/task/:id', { templateUrl: '_task.html', controller: 'TaskDetailsCtrl' })
      .otherwise({ redirectTo: '/tasks' });
  }
])

.controller('TasksIndexCtrl', 
  function ($scope, $http) {
    $http.get('tasks.json').success(
      function (data) {
        $scope.tasks = data;
      }
    );
  }
)

.controller('TaskDetailsCtrl',
  function ($scope, $http, $routeParams) {
    $http.get('task-' + $routeParams.id + '.json').success(
      function (data) {
        $scope.task = data;
      }
    );
  }
);

body {
  padding-top: 20px;
}

[{"id":1,"name":"Mow the lawn","description":"If we had a clover lawn, we wouldn't have to keep mowing it","hours":2,"dueBy":"2014-02-11T04:00:00.000Z","assignedTo":"Linus","status":"Not started"},{"id":2,"name":"Buy flowers","description":"Everybody loves flowers","hours":1.5,"dueBy":"2014-02-14T04:00:00.000Z","assignedTo":"Daphne","status":"In progress"},{"id":3,"name":"Repair the toilet","description":"It's leaky","hours":4,"dueBy":"2014-02-10T04:00:00.000Z","assignedTo":"Darwin","status":"Completed"}] 
<div class="row">
  <div class="col-md-12">
    <table class="table table-striped">
      <thead><tr><th>Task</th><th>Assigned to</th><th>Status</th></tr></thead>
      <tbody>
        <tr ng-repeat="task in tasks">
          <td><a href='#/task/{{task.id}}'>{{task.name}}</a></td>
          <td>{{task.assignedTo}}</td>
          <td>{{task.status}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<a href="#/tasks"><i class="glyphicon glyphicon-arrow-left"></i> Back to task list</a>

<h1>{{task.name}}</h1>
<dl>
  <dt>Description</dt><dd>{{task.description}}</dd>
  <dt>Assigned to</dt><dd>{{task.assignedTo}}</dd>
  <dt>Due by</dt><dd>{{task.dueBy | date:'EEE, dd MMM yyyy'}}</dd>
  <dt>Status</dt><dd>{{task.status}}</dd>
</dl>
{"id":1,"name":"Mow the lawn","description":"If we had a clover lawn, we wouldn't have to keep mowing it","hours":2,"dueBy":"2014-02-11T04:00:00.000Z","assignedTo":"Linus","status":"Not started"}
{"id":2,"name":"Buy flowers","description":"Everybody loves flowers","hours":1.5,"dueBy":"2014-02-14T04:00:00.000Z","assignedTo":"Daphne","status":"In progress"}
{"id":3,"name":"Repair the toilet","description":"It's leaky","hours":4,"dueBy":"2014-02-10T04:00:00.000Z","assignedTo":"Darwin","status":"Completed"}