title: Why do Angularjs directives turn into html comments?
body: <p>I'm trying to do a repeat in a list that I recover from .json file </p>
  
  <pre><code>&lt;ul class="phones"&gt;
    &lt;li ng-repeat="phone in phones | filter:query | orderBy:orderProp"&gt;
      &lt;span&gt;{{phone.name}}&lt;/span&gt;
      &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but when I load the page, it becomes to html comment like</p>
  
  <pre><code>&lt;ul class="phones"&gt;
    &lt;!-- ngRepeat: phone in phones | filter:query | orderBy:orderProp --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Webpage</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="phonecatApp"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Testing angularjs&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
    &lt;link rel="stylesheet" href="css/app.css"&gt;
    &lt;script src="script/angular.js"&gt;&lt;/script&gt;
    &lt;script src="script/controllers.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="PhoneListCtrl"&gt;
  Search: &lt;input ng-model="query"&gt;
  
  &lt;ul class="phones"&gt;
    &lt;li ng-repeat="phone in phones | filter:query | orderBy:orderProp"&gt;
      &lt;span&gt;{{phone.name}}&lt;/span&gt;
      &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>script/Controllers.js</strong></p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  var phonecatApp = angular.module('phonecatApp', []);
  
  phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
    function ($scope, $http) {
      $http.get('data/data.json').success(function(data) {
        $scope.phones = data;
      });
  
      $scope.orderProp = 'age';
    }]);
  </code></pre>
  
  <p><strong>data/data.json</strong></p>
  
  <pre><code>[
  {
   "age": 11,
   "id": "phone1",
   "name": "es un tablet",
   "snippet": "Are you here or not?"
  },
  {
   "age": 12,
   "id": "phone2",
   "name": "this is a phone",
   "snippet": "Are you sure?"
  },
  {
   "age": 13,
   "id": "phone3",
   "name": "hello moto",
   "snippet": "Are you seriously ready?"
  },
  ]
  </code></pre>
  
  <p><strong>Console error</strong></p>
  
  <pre><code>XMLHttpRequest cannot load file:///D:/Dropbox/Web/Angularjs/testFromScratch/app/data/data.json. Cross origin requests are only supported for HTTP. 
  Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///c://testFromScratch/app/data/data.json'.
      at Error (native)
      at file:///c://testFromScratch/app/script/angular.js:8553:11
      at sendReq (file:///c://testFromScratch/app/script/angular.js:8347:9)
      at $http.serverRequest (file:///c://testFromScratch/app/script/angular.js:8080:16)
      at wrappedCallback (file:///c://testFromScratch/app/script/angular.js:11561:81)
      at wrappedCallback (file:///c://testFromScratch/app/script/angular.js:11561:81)
      at file:///c://testFromScratch/app/script/angular.js:11647:26
      at Scope.$eval (file:///c://testFromScratch/app/script/angular.js:12673:28)
      at Scope.$digest (file:///c://testFromScratch/app/script/angular.js:12485:31)
      at Scope.$apply (file:///c://testFromScratch/app/script/angular.js:12777:24) 
  </code></pre>