Erro 404 no AngularJS

Oi eu sou novo no AngularJS. Eu comecei comeste tutorial. Em tutorail$http.get O método está chamando um arquivo JSON. No meu caso eu sempre recebendo 404 Error. A localização do arquivo JSON também é relativa ao arquivo HTML. Mas recebendo sempre o mesmo erro.

Aqui está o meu código: index.html:

<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
  <title>My HTML File</title>
  <script src="angular.js"></script>
  <script src="controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
 Total Number of phones: {{phones.length}}
 Search: <input ng-model="query">
 Sort by:
<select ng-model="orderProp">
  <option value="name">Alphabetical</option>
  <option value="age">Newest</option>
</select>
<div>
  <ul>
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  {{phone.name}}
  <p>{{phone.snippet}}</p>
    </li>
  </ul>
</div>

</body>
</html>

controllers.js

function PhoneListCtrl($scope, $http) {
$http.get('phones.json').success(function(data){
$scope.phones = data;
}).
error(function(data, status, headers, config) {
alert('data = ' + data + ' status = ' + status);
});
}

Todos os arquivos no mesmo diretório (index.html, controllers.js, phones.json). O que estou perdendo aqui? Por que ele está jogando erro 404?

Abaixo está a captura de tela anexada do navegador:1

questionAnswers(4)

yourAnswerToTheQuestion