title: How to work with JSON data and promises retrieved by $http.get?
body: <p>I'm not thinking about angular's $http.get workings correctly, so maybe you can help me re-adjust.  I'm working on a wizard in which each step is a separate html file and the sequence of steps is in a JSON file.  What I want to do is read in the JSON file and then:</p>
  
  <ol>
  <li>Create a list of the steps as a guide.</li>
  <li>Display the content of the step via ng-include.</li>
  <li>Create buttons that point to the previous and next steps.</li>
  </ol>
  
  <p>From what I read in <a href="https://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory">Service vs. Provider vs. Factory</a>, <a href="https://stackoverflow.com/questions/16930473/angularjs-factory-http-get-json-file">AngularJS: factory $http.get JSON file</a>, and similar topics, I can create a service or factory to read in the JSON.  Doing so creates a promise object which then gets passed down the line to be filled whenever the data arrives.  This works find when inserting the data into the model, which is bound to the view.  If I need the data to calculate things like the next step buttons, though, all I have is a promise object - I can't build the links to the previous and next steps and set their states yet.  Is there way to make angular wait until the data arrives before continuing with code execution?  Is that the right way to think about it?</p>
  
  <p>Here is a <a href="http://plnkr.co/edit/9H1GaBdhNU1Laub6yC5j" rel="nofollow noreferrer">plunker</a> and some code snippets:</p>
  
  <p>JSON:</p>
  
  <pre><code>[{
      "name"  : "Step 1",
      "id"    : "step-1",
      "src"   : "step-1.html",
      "state" : "active"
      },
  
      {
      "name"  : "Step 2",
      "id"    : "step-2",
      "src"   : "step-2.html",
      "state" : "unavailable"
      },
  
      {
      "name"  : "Step 3",
      "id"      : "step-3",
      "src"   : "step-3.html",
      "state" : "unavailable"
  }]
  </code></pre>
  
  <p>Factory:</p>
  
  <pre><code>workflow.factory('getWorkflow', function($http, $q) {
     return {
       getFlow: function() {
         var deferred = $q.defer();
         $http.get('steps.json').success(function(data) {
            deferred.resolve(data);
         }).error(function(){
            deferred.reject();
         });
         return deferred.promise;
       }
     }
  });
  </code></pre>
  
  <p>Controller Snippets:</p>
  
  <pre><code>var workflow = angular.module("workflow", ['getWorkflow']);
  
  workflow.controller("showStep", function($scope) {
      $scope.workFlow = {};         // Create the workFlow object
      $scope.workFlow.steps = [];   // Create an empty array to hold the steps
      $scope.workFlow.steps = getWorkflow.getFlow(); 
  
  ... set the first step as the active step and point to the HTML file ...
  
      $scope.workFlow.buildNavButtons = function() {
      scope.workFlow.buttonArray = [];    // Create/reset the array of buttons to nothing
  
      // The button for the PREVIOUS step.
      if ($scope.workFlow.activeStepIndex &gt; 0) {  // Only add button if not the first step
          var prevButton = {};
          prevButton["destination"] = $scope.workFlow.activeStepIndex - 1;
          prevButton["buttonText"] = "&lt;&lt; " + $scope.workFlow.steps[$scope.workFlow.activeStepIndex - 1].name;
          prevButton["buttonClass"] = "workflow-previous";
  
          $scope.workFlow.buttonArray.push(prevButton);
      }
  ...
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- PREVIOUS AND NEXT STEP BUTTONS --&gt;
  &lt;div id="workflow_navigation"&gt;
      &lt;ul&gt;
          &lt;li data-ng-repeat="button in workFlow.buttonArray"&gt;
              &lt;button class = "{{ button.buttonClass }}" 
              ng-click="workFlow.updateStep(button.destination)"&gt;
                  {{ button.buttonText }}
              &lt;/button&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>