title: 404 Error In AngularJS
body: <p>Hi I am new to AngularJS. I startted with <a href="http://docs.angularjs.org/tutorial/step_05" rel="nofollow noreferrer">this tutorial</a>. In tutorail <code>$http.get</code> method is invoking a JSON file. In my case I always getting 404 Error. Location of JSON file is also relative with HTML file. But getting the same error always.</p>
  
  <p>Here is my code:
  index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My HTML File&lt;/title&gt;
    &lt;script src="angular.js"&gt;&lt;/script&gt;
    &lt;script src="controllers.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="PhoneListCtrl"&gt;
   Total Number of phones: {{phones.length}}
   Search: &lt;input ng-model="query"&gt;
   Sort by:
  &lt;select ng-model="orderProp"&gt;
    &lt;option value="name"&gt;Alphabetical&lt;/option&gt;
    &lt;option value="age"&gt;Newest&lt;/option&gt;
  &lt;/select&gt;
  &lt;div&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="phone in phones | filter:query | orderBy:orderProp"&gt;
    {{phone.name}}
    &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>controllers.js</p>
  
  <pre><code>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);
  });
  }
  </code></pre>
  
  <p>All the files in same directory(index.html, controllers.js, phones.json). What am I missing here? Why it is throwing 404 Error?</p>
  
  <p>Below is the attached screenshot of browser:
  <img src="https://i.stack.imgur.com/i0biE.png" alt="Below is the attached screenshot of browser:"><a href="https://i.stack.imgur.com/i0biE.png" rel="nofollow noreferrer">1</a></p>