Untitled

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

  <head>
    <script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <script data-require="angular-route@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>
      <a href="#/cars">Cars</a>
    </h1>
    <ng-view></ng-view>
  </body>

</html>

var app = angular.module('app', ['ngRoute']);
angular.module('app').run(function($templateCache) {
    $templateCache.put('cars.html', '<div ng-repeat="car in cars">{{ car }}</div>');
});

app.factory('api', function($http, $q) {

    return {
        getCars: function() {
            var deferred = $q.defer();

            $http.get('cars.json').success(function(data) {
                deferred.resolve(data);
            });

            return deferred.promise;
        }
    };
})
.controller('carsCtrl', function($scope, api) {
    api.getCars().then(function(data) {
        $scope.cars = data;
    });
})
.config(function($routeProvider) {
    $routeProvider.when('/cars', {
         templateUrl: 'cars.html',
         controller: 'carsCtrl'});
});

/* Styles go here */

["Audi", "Opel"]