Basic index + detail view using Angular route + rootScope

<!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 ($rootScope, $http) {
    if (typeof $rootScope.tasks === 'undefined') {
      $rootScope.tasks = [];
      $http.get('tasks.json').success(
        function (data) {
          $rootScope.tasks = data;
        }
      );
    }
  }
)

.controller('TaskDetailsCtrl',
  function ($rootScope, $scope, $routeParams) {
    var getTask = function (id) {
      id = parseInt(id, 10);
      for (var i = 0; task = $rootScope.tasks[i]; ++i) {
        if (task.id === id) {
          return task;
        }
      }
      return task;
    };

    $scope.task = getTask($routeParams.id);
  }
);

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>