angularjs - How to work with JSON data and promises retrieved by $http.get? -

I'm not thinking of angle's http .get functions properly, so help me to adjust again You can. I am working on a wizard in which each step is a separate HTML file and the sequence of steps is in the JSON file. Whatever I want to do is read into the JSON file and then:

1. Make a list of steps as a guide.
2. Include ng-.
3. Create buttons that point to the previous and next steps.

From what I have read, and similar topics, I can create a service or factory in JSON. By doing so, a promise item is made, which happens even when the line is filled when the data arrives. This works when inserting data into a model, which is bound to the view. If I need data to calculate things like the next step button, however, I have a promise item - I can not link the previous and next steps and can not set their states yet. Is there any way to wait angles until the data arrives before continuing with code execution? Is this the right way to think about it?

Here are some other code snippets:

JSON:

  [{"" ":" "Step 1", "ID": "Step2", "id": "step-1", "source": "step-1. Html", "state": "active"}, {"name": "step2", "id": "step-2", "source" : "Step3", "src": "step-3.html", "state": "step-2," "state": "unavailable"}, {"name": "step 3", "id" ":" Unavailable "}] factory  
  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 ();}); Returns; Promote;}}});  
 
 Administrator snippet: 
 
  var workflow = angular.module ("workflow", ['getWorkflow']); Workflow.controller ("showStep", function ($ scope) {$ scope.workFlow = {}; // create workflow item $ scope.workFlow.steps = []; // Create an empty array to take the $ stages scope .workFlow.steps = getWorkflow.getFlow (); ... set the first step as the active step and point to $ scope.workFlow.buildNavButtons = function () {scope.workFlow.buttonArray = [ ]; // nothing to create / reset array of buttons / button for preceding step. ($ Scope.workFlow.activeStepIndex & gt; 0) {// Simply add buttons if not otherwise first step var PrevButton = {}; prevButton ["Destination"] = $ scope.workFlow.activeStepIndex - 1; prevButton ["buttonText"] = " 
 
 html 
 
  & lt;! - The last and next button -> gt; id = "workflow_navigation" & gt; & lt; Ul & gt; & Lt; Li data-ng-repeat = "button button at work.button array" & gt; & Lt; Button class = "{{button.buttonClass}}" ng-click = "workflow.update step (button. Austin)" & gt; {{Button.buttonText}} & lt; / Button & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;  
 

You've got it almost right, only a few issues before you get your controller module There is a need to not be used as a dependency.

  var workflow = angular.module ("workflow", []); Workflow.controller ("showstep", function ($ radius, getWorkflow) {  
 and second, you will have to wait for the fulfillment promise before acting on it:  <. Steps that appear on screen are "activeStep" control;>  getWorkflow.getFlow () then (function (data) {$ scope.workFlow.steps = data console.log ($ scope.workFlow.steps) Ex. // This starts the default content and loads $ scope.workFlow.activeStep = $ scope.workFlow.steps [0] ;. $ scope.workFlow.activeStepIndex = 0; console.log ($ scope.workFlow.activeStep) ; $ Scope .workflow.content = $ scope.workFlow.activeStep.src; // Step Structure The display itself changes - it changes the change.}); // Use the factory located below  

You should fix the main issue with the promise and you will be allowed to continue You can check and work here.