title: ng-repeat data flashes then disappers
body: <p>i have the following .json file:</p>
  
  <pre><code>[
  {
      "host": "host00",
      "avgcpu": "1%",
      "maxcpu": "2%",
      "freem": "32000"
  },
  {
      "host": "node01",
      "avgcpu": "33%",
      "maxcpu": "80%",
      "freem": "64000"
  },
  {
      "host": "node02",
      "avgcpu": "55%",
      "maxcpu": "75%",
      "freem": "100000"
  },
  {
      "host": "node03",
      "avgcpu": "85%",
      "maxcpu": "100%",
      "freem": "86674"
  },
  {
      "host": "node04",
      "avgcpu": "3%",
      "maxcpu": "7%",
      "freem": "86613"
  }
  ]
  </code></pre>
  
  <p>I try to read it with the following controller:</p>
  
  <pre><code>angular.module('usagemdl').controller('usagectrl', ['$scope', '$http', function ($scope, $http) {
  $http.get('/out/usage.json')
      .then(function (response) {
          $scope.usages = response.usages;
      });
  }]);
  </code></pre>
  
  <p>And then i try to display it with the following html code:</p>
  
  <pre><code>&lt;div class="cards" ng-controller="usagectrl"&gt;
          &lt;div class="card" style="width: 18rem;" ng-repeat="usage in usages"&gt;
              &lt;div class="card-header"&gt;
                  {{ usage.host }}
              &lt;/div&gt;
              &lt;ul class="list-group list-group-flush"&gt;
                  &lt;li class="list-group-item"&gt;{{ usage.avgcpu }}&lt;/li&gt;
                  &lt;li class="list-group-item"&gt;{{ usage.maxcpu }}&lt;/li&gt;
                  &lt;li class="list-group-item"&gt;{{ usage.freem }}&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><code>ng-app</code> is defined in my <code>&lt;body&gt;</code> which works properly in a different scenario.</p>
  
  <p>Im not sure what im doing wrong.
  I can see a empty card for a second but then it dissappers.</p>
  
  <p>Please let me know if you need any further code to find the issue.</p>