title: Data is not getting updated in the view after promise is resolved
body: <p>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. </p>
  
  <p>I have an angular service called <strong>api</strong> 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.</p>
  
  <pre><code>debugger.factory "api", ["$resource", "$q", ($resource, $q) -&gt;
    apiCall1 = [
      key1: "v1"
      key2: "v2"
      key3: "v3"
    ]
  
    apiCall2 =
    .
    .
    .
    apiCall7 =
  
    factory = getIsDynamicApp: -&gt;
      deferred = $q.defer()
      deferred.resolve apiCall1
      deferred.promise
  
    factory
  ]
  </code></pre>
  
  <p>I have created an edge service to call methods from my api service. I have used $timeout to simulate the async api calls.</p>
  
  <pre><code>debugger.factory "EdgeService", ($resource, api, $q, $timeout, $http) -&gt;
  
    fetchIsDynamic = -&gt;
      api.getIsDynamicApp()   
  
    tickets: -&gt;
      deferred = $q.defer()
      fetchIsDynamic().then (data) -&gt;
        $timeout (-&gt;
          deferred.resolve data
          console.log data #&lt;- this works, I can see the data
        ), 3000  
      deferred.promise
  </code></pre>
  
  <p>In my EdgeController I call the service and attach the value to $scope.data</p>
  
  <pre><code>debugger.controller "EdgeController", ($scope, EdgeService) -&gt;
    $scope.load = -&gt;
      $scope.data = EdgeService.tickets()
  
  debugger.$inject = ["$scope"]
  </code></pre>
  
  <p>This is my slim template</p>
  
  <pre><code>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}}
  </code></pre>
  
  <p>The output is not getting binded'</p>
  
  <p><img src="https://i.stack.imgur.com/2da4H.png" alt="enter image description here"></p>
  
  <p><strong>Also is this the best way to implement if I have to make multiple api calls and update the view as each one returns?</strong></p>