title: Load initial data in an angularjs app
body: <p>I'm currently trying to develop an AngularJS app. This is my first application using AngularJS and I think I'm pretty aware of how it works since I've been a Silverlight developer for some years :-)</p>
  
  <p>However, there's one, simple thing I cannot figure out: how to get the initial data for the app when it starts.</p>
  
  <p>What I need is a simple table of data where a few fields can be edited inline (by dropdowns) My app structure is like this:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('feedbackApp', []);
  </code></pre>
  
  <p><strong>feedbackService.js</strong></p>
  
  <pre><code>app.service('feedbackService', function ($http) {
  this.getFeedbackPaged = function (nodeId, pageNumber, take) {
      $http.get('myUrl', function (response) {
          return response;
      });
  };
  });
  </code></pre>
  
  <p><strong>feedbackController.js</strong></p>
  
  <pre><code>app.controller('feedbackController', function ($scope, feedbackService, $filter) {
  // Constructor for this controller
  init();
  
  function init() {
      $scope.feedbackItems = feedbackService.getFeedbackPaged(1234, 1, 20);
  }
  });
  </code></pre>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;html ng-app="feedbackApp"&gt;
  &lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt; 
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table class="table" style="border: 1px solid #000; width:50%;"&gt;
          &lt;tr ng-repeat="fb in feedbackItems | orderBy: 'Id'" style="width:auto !important;"&gt;
              &lt;td data-title="Ansvarlig"&gt;
                  {{ fb.Name }}
              &lt;/td&gt;
              &lt;td data-title="Kommentar"&gt;
                  {{ fb.Comment }}
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>But the table is empty when I run the application. I think it's because the app starts before the data from the service is added to the viewmodel ($scope), but I have no idea of how to make it initialise before the app starts, so the first 20 table rows are displayed.</p>
  
  <p>Does anyone know how to do this?</p>
  
  <p>Thanks in advance!</p>