Data is not getting updated in the view after promise is resolved

Question

I am using my Rails app as an API backend. So I have a single page angular app which will make multiple api calls and start displaying as each data gets returned. I don't want to wait for all the results from the API call and then load the data, so I started learning deferred and promise.

I have an angular service called api where I will have $http calls to all my api. I have hardcoded the data that returns from each one of the api calls for testing purposes.

debugger.factory "api", ["$resource", "$q", ($resource, $q) ->
  apiCall1 = [
    key1: "v1"
    key2: "v2"
    key3: "v3"
  ]

  apiCall2 =
  .
  .
  .
  apiCall7 =

  factory = getIsDynamicApp: ->
    deferred = $q.defer()
    deferred.resolve apiCall1
    deferred.promise

  factory
]

I have created an edge service to call methods from my api service. I have used $timeout to simulate the async api calls.

debugger.factory "EdgeService", ($resource, api, $q, $timeout, $http) ->

  fetchIsDynamic = ->
    api.getIsDynamicApp()   

  tickets: ->
    deferred = $q.defer()
    fetchIsDynamic().then (data) ->
      $timeout (->
        deferred.resolve data
        console.log data #<- this works, I can see the data
      ), 3000  
    deferred.promise

In my EdgeController I call the service and attach the value to $scope.data

debugger.controller "EdgeController", ($scope, EdgeService) ->
  $scope.load = ->
    $scope.data = EdgeService.tickets()

debugger.$inject = ["$scope"]

This is my slim template

doctype html
html(ng-app="debugger" class="ng-scope")
  head
    title Ads Debugger
    = stylesheet_link_tag    "application/debugger"
    = javascript_include_tag "debugger"

  body
    #content(ng-controller="EdgeController")
      .search_form
        form class="serch_form"
          input type="text" name="search_box" id="search_box"
          input type="submit" value="Search" ng-click="load()"

      div
        pre message {{data}}

The output is not getting binded'

Also is this the best way to implement if I have to make multiple api calls and update the view as each one returns?

Answer 1

$scope.data = EdgeService.tickets()

Should be

EdgeService.tickets().then (data) ->
 $scope.data = data

AngularJS does not automatically unwrap promises in newer versions. This would work in older versions of Angular.

To do multiple API calls dependant of one another you can do

callA
.then(callB)
.then(callC)

Yo can do multiple in parallell using $q.all

$q.all([callA, callB, callC]).then( .... )