title: ionic and angular : json doesn't show
body: <p>I have an ionic app with angular and a json file I would like to show up.</p>
  
  <p>Here's what I have in my <strong>www</strong> folder :</p>
  
  <pre><code>--css
  --img
  --js
  ----app.js
  ----controller.js
  --lib
  --map
  ----dep.json
  --vendors
  index.html
  </code></pre>
  
  <p>Here's an ersatz of my <em>index.html</em></p>
  
  <pre><code>&lt;!-- your app's js --&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/controller.js"&gt;&lt;/script&gt;
  
  &lt;!-- svg map stuff --&gt;
  &lt;link href="vendors/map/jqvmap.css" media="screen" rel="stylesheet" type="text/css" /&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="vendors/map/jquery.vmap.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="vendors/map/jquery.vmap.france.js" type="text/javascript"&gt;&lt;/script&gt;
  [...]
  &lt;script id="templates/map.html" type="text/ng-template"&gt;
    &lt;ion-view view-title="Map"&gt;
      &lt;ion-content class="padding"&gt;
        &lt;div class="bar bar-header item-input-inset"&gt;
          &lt;label class="item-input-wrapper"&gt;
            &lt;i class="icon ion-ios-search placeholder-icon"&gt;&lt;/i&gt;
            &lt;input type="search" placeholder="Recherchez une ville, un code postal" ng-model="query"&gt;
          &lt;/label&gt;
          &lt;button class="button button-clear"&gt;
            Cancel
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div ng-controller="CustomerController"&gt;
          &lt;div id="francemap"style="width: 500px; height: 500px;"&gt;&lt;/div&gt;
          &lt;button type="button" ng-click="myName('Mowso')"&gt; Click Me :) &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="list-dep" ng-controller="DepListCtrl"&gt;
          &lt;!--Body content--&gt;
  
          &lt;ul class="deps"&gt;
            &lt;li ng-repeat="dep in deps | filter:query"&gt;
              &lt;p&gt;{{dep.code}} - {{dep.name}}&lt;/p&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt; 
      &lt;/ion-content&gt;
    &lt;/ion-view&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see it is an app with tabs. At first i put the data in the <em>controller.js</em> but now I want them in a json file but they don't appear on the screen anymore. my <em>controller.js</em> look like this :</p>
  
  <pre><code> 'use strict';
  
  /* Controllers */
  
  var map = angular.module('ionicApp');
  
  /*map.controller('DepListCtrl', function($scope) {
    $scope.deps = [
      {'code': '01', 'name': 'Ain'},
      {...},
      {'code': '974', 'name': 'Réunion'}
    ];
  });*/
  
  map.controller('DepListCtrl', ['$scope', '$http', function($scope, $http) {
      $http.get('map/deps.json').success(function(data) {
          $scope.dep = data;
          console.log(data);
      });
  }]);
  </code></pre>
  
  <p>And all the data I have is in my json file (I commented them in the controller to keep a track of what i did before, basically they are the same in the json with more indentation).</p>
  
  <p>I updated my nodejs yesterday but as I saw data disappeared I switch back to v4-4-4. I don't have any console error (I used to have one because I did not put my json in my map folder, silly me) and the <em>console.log(data)</em> in my controller show an array with all of my <em>deps</em>.</p>
  
  <p>What did I do wrong ? </p>