title: JSON load issue with angular.js in phonegap
body: <p>I'm trying to load JSON from my wordpress-based website. I'm using phonegap to create an app on android, ios and windows. I'm using this js for the JSON, calling for business hours (shours1, shours2, shours3):</p>
  
  <pre><code>(function(){
  'use strict';
    var app = angular.module('app', ['onsen', 'angular-images-loaded', 'ngMap', 'angular-carousel']);
  app.controller('restaurantController', function($http, $scope, $compile, $sce){
  
  
   $scope.getHours = function(){
  
    $scope.isFetching = true;
  
    $scope.shours1 = '';
    $scope.shours2 = '';
    $scope.shours3 = '';
  
    $http.jsonp('http://signsrestaurant.ca/api/get_posts/?post_type=restaurant&amp;posts_per_page=-1&amp;callback=JSON_CALLBACK').success(function(response) {
  
      // Get's the first restaurant
  
      $scope.restaurantJson = response.posts[0];
      $scope.isFetching = false;
      console.log( $scope.restaurantJson.custom_fields.shours1[0] );
  
      $scope.shours1 = $scope.restaurantJson.custom_fields.shours1[0];
      $scope.shours2 = $scope.restaurantJson.custom_fields.shours2[0];
      $scope.shours3 = $scope.restaurantJson.custom_fields.shours3[0];
  
     });
  
    }
  
  });
  })();
  </code></pre>
  
  <p>Here is my html:</p>
  
  <pre><code>   &lt;ons-page ng-controller="restaurantController" ng-init="getHours()"&gt;
     &lt;ons-toolbar&gt;
     &lt;div class="left"&gt;
     &lt;ons-toolbar-button ng-click="menu.toggle()"&gt;&lt;ons-icon icon="ion-navicon-round" fixed-width="false"&gt;&lt;/ons-icon&gt;&lt;/ons-toolbar-button&gt;
     &lt;/div&gt;
     &lt;div class="center"&gt;Location&lt;/div&gt;
     &lt;div class="right" ng-show="isFetching"&gt;
     &lt;ons-toolbar-button&gt;&lt;ons-icon icon="ion-loading-c" fixed-width="false" &gt;&lt;/ons-icon&gt;&lt;/ons-toolbar-button&gt;
      &lt;/div&gt;
      &lt;/ons-toolbar&gt;
  
      &lt;div class="app-page"&gt;
      &lt;div class="app-page-photo"&gt;   
      &lt;ons-row class="app-map"&gt;   
      &lt;ons-col&gt;
        &lt;map center="[43.664639, -79.384649]"&gt;
          &lt;marker
              position="[43.664639, -79.384649]"
              title="Signs Restaurant &amp; Bar"
              animation="Animation.BOUNCE" 
              visible="true" &gt;&lt;/marker&gt;
  
         &lt;/map&gt;
         &lt;/ons-col&gt;
         &lt;/ons-row&gt;
         &lt;ons-list class="app-photo-buttons"&gt;
         &lt;ons-list-item modifier="action-buttons"&gt;
          &lt;ons-row class="action"&gt;
            &lt;ons-col class="action-col"&gt; 
              &lt;div class="action-icon"&gt;&lt;ons-icon icon="ion-ios-star-half"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
              &lt;div class="action-label"&gt;Rate&lt;/div&gt;
            &lt;/ons-col&gt;
  
            &lt;ons-col class="action-col"&gt;
              &lt;div class="action-icon"&gt;&lt;ons-icon icon="ion-bookmark"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
              &lt;div class="action-label"&gt;Favorite&lt;/div&gt;
            &lt;/ons-col&gt;
  
            &lt;ons-col class="action-col"&gt;
              &lt;div class="action-icon" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')"&gt;&lt;ons-icon icon="ion-ios-telephone"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
              &lt;div class="action-label" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')"&gt;Call&lt;/div&gt;
            &lt;/ons-col&gt;
  
            &lt;ons-col class="action-col"&gt;
              &lt;div class="action-icon" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')"&gt;&lt;ons-icon icon="ion-map"&gt;&lt;/ons-icon&gt;&lt;/div&gt;
              &lt;div class="action-label" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')"&gt;Directions&lt;/div&gt;
            &lt;/ons-col&gt;
          &lt;/ons-row&gt;
         &lt;/ons-list-item&gt;
         &lt;/ons-list&gt;
  
         &lt;ons-list modifier="inset" style="margin-top: 10px"&gt;
         &lt;ons-list-item&gt;
         &lt;div class="app-open-desc"&gt;
          &lt;ons-icon icon="ion-android-clock"&gt;&lt;/ons-icon&gt;
          Monday &lt;span class="label label-danger"&gt;{{ shours1 }}&lt;/span&gt;
         &lt;/div&gt;
         &lt;/ons-list-item&gt;
         &lt;ons-list-item&gt;
         &lt;div class="app-open-desc"&gt;
          &lt;ons-icon icon="ion-android-clock"&gt;&lt;/ons-icon&gt;
          Tuesday-Thursday &lt;span class="label label-default"&gt;{{ shours2 }}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/ons-list-item&gt;
      &lt;ons-list-item&gt;
        &lt;div class="app-open-desc"&gt;
          &lt;ons-icon icon="ion-android-clock"&gt;&lt;/ons-icon&gt;
          Friday-Sunday &lt;span class="label label-default"&gt;{{ shours3 }}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/ons-list-item&gt;
    &lt;/ons-list&gt;
  
    &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/ons-page&gt;
  </code></pre>
  
  <p>It seems to be working partially. The shours do load, but only after I rotate my android or click on the menu. It doesn't load off-hand immediately. It basically needs some sort of a refresh to get it to load. I would appreciate it if someone can help me out with this.</p>