title: AngularJS, only runs correctly in firefox why?
body: <p>I'm using angularjs. The example I have done works perfectly in firefox, but does not work any other browser.</p>
  
  <p>The error that appears in other browsers when I press add picture botton in index is:</p>
  
  <p>XMLHttpRequest cannot load file:///C:/...../gifwallet/add_gif.html. Cross origin requests are only supported for HTTP. </p>
  
  <p>I do not understand is what is wrong. </p>
  
  <hr>
  
  <p>index.html</p>
  
  <hr>
  
  <pre><code>&lt;html lang="es" ng-app="gifwalletApp"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="stylesheets/app.css"&gt;
  
    &lt;script src="javascripts/angular.js"&gt;&lt;/script&gt;
    &lt;script src="javascripts/angular-translate.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="src/app.js"&gt;&lt;/script&gt;
    &lt;script src="javascripts/ui-bootstrap-tpls-0.11.0.min.js"&gt;&lt;/script&gt; 
  
    &lt;title&gt;GIF Wallet&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;div class="container"&gt;
    &lt;div ng-controller="TranslateController"&gt;
     &lt;button ng-click="changeLanguage('es')" translate="BUTTON_TEXT_ES"&gt;&lt;/button&gt;
     &lt;button ng-click="changeLanguage('en')" translate="BUTTON_TEXT_EN"&gt;&lt;/button&gt;
    &lt;/div&gt;
     &lt;header ng-controller="MenuController"&gt;
          &lt;ul class="nav nav-pills pull-right"&gt;
              &lt;li class="active"&gt;
                  &lt;a href="#"&gt;
                      &lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt; &amp;nbsp;
                    &lt;span class="badge pull-right"&gt;42&lt;/span&gt; 
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#" ng-click="add()"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&lt;/a&gt; 
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href=""&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;h3 class="text-muted"&gt;GIF Wallet&lt;/h3&gt;
      &lt;/header&gt;
  
      &lt;div id="images" class="row" ng-controller="gifListController"&gt; 
          &lt;div class="col-lg-12 media" ng-repeat="gif in giflist"&gt; 
              &lt;a href="" class="pull-left thumbnail"&gt;
                  &lt;img class="media-object" src="{{ gif.url }}"&gt; 
              &lt;/a&gt;
              &lt;div class="media-object"&gt;
                  &lt;h4 class="media-heading"&gt;{{ gif.name }}&lt;/h4&gt;
                  &lt;p&gt;
                      &lt;a&gt;&lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt; {{ 'FAVORITO' | translate }}&lt;/a&gt;
                  &lt;/p&gt;    
                  &lt;p&gt;
                      &lt;a&gt;&lt;span class="glyphicon glyphicon-heart"&gt;&lt;/span&gt; {{ 'ELIMINAR' | translate }}&lt;/a&gt;
                  &lt;/p&gt;
                  &lt;p&gt;
                      Link: &lt;a href=""&gt;{{ gif.url }}&lt;/a&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;p&gt;&amp;copy; GIFWallet 2014&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <hr>
  
  <p>app.js</p>
  
  <hr>
  
  <pre><code>var gifwalletApp = angular.module('gifwalletApp', ['ui.bootstrap','pascalprecht.translate']); 
  
  gifwalletApp.config(function($translateProvider) {
    $translateProvider.translations('en', {
      FAVORITO: 'Favorite',
      ELIMINAR: 'Delete'
    })
   .translations('es', {
     FAVORITO: 'Favorito',
     ELIMINAR: 'Eliminar'
    });
   $translateProvider.determinePreferredLanguage();
  });
  
  gifwalletApp.controller('TranslateController', function($translate, $scope) {
    $scope.changeLanguage = function (langKey) {
      $translate.use(langKey);
    };
  });
  
  gifwalletApp.controller('gifListController', ['$rootScope','$scope','Storage','$http', 
  function($rootScope,$scope,Storage,$http){
    $scope.giflist = Storage.list();
    $rootScope.$on('reloadList', function(event, data){ 
      $scope.giflist = Storage.list();
    });
  
  }]);
  
  gifwalletApp.controller('MenuController', ['$rootScope','$scope', 'Storage','$modal', 
   function($rootScope,$scope, Storage, $modal) {
  
      $scope.add = function() {   
           $modal.open({
              templateUrl: 'add_gif.html',
              controller: function($scope, $modalInstance) {
                  $scope.Gif = {};
                  $scope.save = function() {
  
                       var image = {
                          'name': $scope.Gif.name,
                          'url': $scope.Gif.url,
                          'tags': [],
                          'favorite': false
                      };
                      Storage.save(image);
  
                      $rootScope.$broadcast('reloadList'); 
                      $modalInstance.dismiss('cancel');
  
                  };
  
                  $scope.cancel = function() {
                      $modalInstance.dismiss('cancel');
                  };
              }
          });
      };
  
  }
  ]);
  
   gifwalletApp.service('Storage', ['$window',    function($window) {
  
      var images = [];
  
      if (!$window.localStorage) {
          alert('No tienes localStorage activado');
      } else {
          images = $window.localStorage.getItem('gifWallet');
      }
  
      this.save = function(image) {
  
          if (images == null) {
              images = [];
          }
          else {
              images = angular.fromJson(images);    
          }
          images.push(image);
          imagesString = JSON.stringify(images);
          $window.localStorage.setItem('gifWallet', imagesString);
  
      }
  
      this.get = function(key) {
  
      }
  
      this.remove = function(key) {
  
      }
  
      this.list = function() {
          return angular.fromJson($window.localStorage.getItem('gifWallet'));
      }
  
  }]);
  </code></pre>
  
  <hr>
  
  <p>add_gif.html</p>
  
  <hr>
  
  <pre><code>&lt;div class="modal-header"&gt;
    &lt;h3 class="modal-title"&gt;Agregar GIF&lt;/h3&gt;    
    &lt;p class="text-muted"&gt;Añade un gif favorito a tu wallet usando el nombre y la URL&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
   &lt;form action="" role="form"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="name"&gt;Nombre&lt;/label&gt;
          &lt;input type="text" id="name" ng-model="Gif.name" placeholder="Corgi bailarín" class="form-control"&gt; 
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="url"&gt;URL&lt;/label&gt;
          &lt;input type="url" id="url" ng-model="Gif.url" placeholder="http://..." class="form-control"&gt;
      &lt;/div&gt;
   &lt;/form&gt;
  &lt;/div&gt;
   &lt;div class="modal-footer"&gt;
      &lt;button class="btn btn-link" ng-click="cancel()"&gt;Cancelar&lt;/button&gt;
      &lt;button class="btn btn-primary" ng-click="save()"&gt;Agregar GIF&lt;/button&gt;
   &lt;/div&gt;
  </code></pre>