title: AngularJS update View after Model loaded from Ajax
body: <p>I'm newbie of angularjs developing and i wrote this simple app, but don't understand how i can update view, after the model il loaded from ajax request on startup!</p>
  
  <p>This code don't work when I add delay into photos.php, using:
      sleep(3);
  for simulate remote server delay! instead if search.php is speedy it work!!</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="photoApp"&gt;
  &lt;head&gt;
  &lt;title&gt;Photo Gallery&lt;/title&gt;
  &lt;/head&gt; 
  &lt;body&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;script src="../angular.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  'use strict';
  
  var photos = [];  //model
  
  var photoAppModule = angular.module('photoApp', []);
  
  photoAppModule.config(function($routeProvider) {
      $routeProvider.when('/photos', {
                          templateUrl: 'photo-list.html',
                          controller: 'listCtrl' });
      $routeProvider.otherwise({redirectTo: '/photos'});
  })
  .run(function($http) {
      $http.get('photos.php')//load model with delay
      .success(function(json) {
  
          photos = json; ///THE PROBLEM HERE!! if photos.php is slow DON'T update the view!
  
      });
  })
  .controller('listCtrl', function($scope) {
  
      $scope.photos = photos;
  
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>output of photos.php</strong></p>
  
  <pre><code>[{"file": "cat.jpg", "description": "my cat in my house"},
   {"file": "house.jpg", "description": "my house"},
   {"file": "sky.jpg", "description": "sky over my house"}]
  </code></pre>
  
  <p><strong>photo-list.html</strong></p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat="photo in photos "&gt;
      &lt;a href="#/photos/{{ $index }}"&gt;
          &lt;img ng-src="images/thumb/{{photo.file}}" alt="{{photo.description}}" /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>EDIT 1, Defer solution:</strong></p>
  
  <pre><code>.run(function($http, $q) {
  
      var deferred = $q.defer();
  
      $http.get('photos.php')//load model with delay
      .success(function(json) {
          console.log(json);
  
          photos = json; ///THE PROBLEM!! if photos.php is slow DON'T update the view!
  
          deferred.resolve(json);//THE SOLUTION!
      });
  
      photos = deferred.promise;
  })
  </code></pre>
  
  <p><strong>EDIT 2, Service solution:</strong></p>
  
  <pre><code>... 
  //require angular-resource.min.js
  angular.module('photoApp.service', ['ngResource']).factory('photoList', function($resource) {
      var Res = $resource('photos.php', {},
          {
              query: {method:'GET', params:{}, isArray:true}
          });
      return Res;
  });
  
  var photoAppModule = angular.module('photoApp', ['photoApp.service']);
  
  ...
  
  .run(function($http, photoList) {
  
      photos = photoList.query();
  })
  ...
  </code></pre>