title: Angular SPA not showing API data on state activation
body: <p>I have an Angular.js  Single Page Application app (Ionic Framework) communicating with the Rails backend.</p>
  
  <p>I use a <code>$http</code> service to get data from my backend API.</p>
  
  <p>I'm facing a problem which demontrates itself by sometimes not showing the data fetched from backend. I start the app, the <code>$http.get</code> call is issued and data is returned (I can see it in logs) but it's not shown. 
  So, upon calling the data app activates the state which should show the data returned (in html template through ng-repeat…), and it’s empty.</p>
  
  <p>If I then change the app state and return to the previous state, the data is shown.
  When I use Angular’s $resource service (like here: <a href="http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/" rel="nofollow">http://www.sitepoint.com/creating-crud-app-minutes-angulars-resource/</a>) I get data fetched and showed but I run into some problems later and therefore cannot use <code>$resource</code>. </p>
  
  <p>I suppose the template is empty because it is shown before the data is actually returned from API. How can I fix this problem? I've tried everything I could think of, all <em>flavours</em> of $http.get, .success() or .then(), promises, even <code>$timeout</code>...
  Below are the code snippets from actual app:</p>
  
  <p>controllers.js:</p>
  
  <pre><code>.controller('EnemiesCtrl', function($scope, $stateParams, Enemies ) {
      $scope.enemies = Enemies.all(window.localStorage['id']); 
  })
  </code></pre>
  
  <p>services.js:</p>
  
  <pre><code>.factory('Enemies', ['$http', function($http, userId) {    
      // Use a resource here that returns a JSON array
      var enemies = null;
      userId = window.localStorage['id'];
  
      $http({
      url:"http://localhost:3000/home/api",
      method: "GET",
      params: {user_id: userId}
      }).then(function(resp){
        enemies = resp.data;  
        console.log('Success', resp.data);            
      },function(err) {
        console.error('ERR', err.status);
        alert('Error: '+err.status);
        // err.status will contain the status code
      });
  
      return {
       all: function() {      
       return enemies;
       }
      }
  
  }]);
  </code></pre>
  
  <p>template.html:</p>
  
  <pre><code>&lt;ion-item ng-repeat="enemy in enemies" type="item-text-wrap" href="#/tab/place/{{enemy.id}}"&gt;
      enemy.name&lt;/br&gt;     
  &lt;/ion-item&gt; 
  </code></pre>