title: AngularJS: How to load JSON data onto a scope variable
body: <p>I'm creating a personal website where I can keep updating content without having to manipulate the <code>HTML</code>. I'm trying to achieve this by simply loading and updating a <code>JSON</code> file. But right now, I'm having trouble loading <code>JSON</code> data onto a <code>scope</code> variable.</p>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="angular.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="maincontroller.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div ng-app="mainApp" ng-controller="mainController"&gt;
              &lt;div id="content"&gt;
                  &lt;div ng-repeat="content in contents"&gt;
                      &lt;h2&gt;{{content.heading}}&lt;/h2&gt;
                      &lt;p&gt;{{content.description}}&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>maincontroller.js</em></p>
  
  <pre><code>var myapp = angular.module('mainApp', []);
  myapp.controller('mainController',function($scope,$http){
  
      $scope.contents = null;
      $http.get('mainContent.json')
          .success(function(data) {
              $scope.contents=data;
          })
          .error(function(data,status,error,config){
              $scope.contents = [{heading:"Error",description:"Could not load json   data"}];
          });
  
      //$scope.contents = [{heading:"Content heading", description:"The actual content"}];
      //Just a placeholder. All web content will be in this format
  });
  </code></pre>
  
  <p>This is what the <code>JSON</code> file looks like</p>
  
  <pre><code>[
      {"heading":"MyHeading","description":"myDescription"},
  ]
  </code></pre>
  
  <p>I actually tried following the solution given <a href="https://stackoverflow.com/questions/13020821/how-to-load-json-into-my-angular-js-ng-model">here</a>, but it's not loading the <code>JSON</code> file stored in the same folder. The output I get is from the error handling function which is saying <code>Error: Cannot load JSON data</code> as mentioned.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>EDIT: I put the same code on <a href="http://plnkr.co/edit/fIGAt3RAFS4xe527UAIU?p=preview" rel="nofollow noreferrer">plunker</a> and it works fine. It's just not working on my local machine.</p>