title: Data-binding from external HTTP API wrapped in a service does not work
body: <p>I have a problem binding data from an external HTTP API. I tried to follow best practices and tried several approaches (reading the Internet and SO), but the "magic" of data-binding doesn't work and I can't find/understand why. Here's the code :</p>
  
  <pre><code>angular.module('myApp', [])
      .service('externalAPI', ['$q', function($q) {
          var data = [], deferred = $q.defer();
  
          // The HTTP calls are made through the provided SDK lib
          // It uses promises too
          var pullData = function() {
              externalLib.get('somePath').then(function(newData) {
                  // I expect this assignment to help the data-binding
                  data = newData
                  deferred.resolve(newData)
              })
              return deferred.promise;
          };
  
          return {
              data: data,
              pullData: pullData
          }
      }])
      .controller('myController', ['$scope', 'externalAPI', function($scope, externalAPI) {
          // Here I tried a lot of approaches to make the "magic" of databinding works, with no luck
  
          // 1. Bind the whole service, so that externalAPI.data is always updated in templates
          $scope.externalAPI = externalAPI;
          externalAPI.pullData()
  
          // 2. Bind and expose just the data
          $scope.data = externalAPI.data;
          externalAPI.pullData()
  
          // 3. Do #1 + $watch the whole externalAPI object
          // Note: I put console.log() calls inside the first function, it always return the initial version
          $scope.externalAPI = externalAPI;
          $scope.$watch(function() { return externalAPI }, function(newVersion) {
              $scope.externalAPI = newValue;
          });
          externalAPI.pullData()
  
          // 4. Do #2 + $watch just the data of the externalAPI
          $scope.data = externalAPI.data;
          $scope.$watch(function() { return externalAPI.data }, function(newData) {
              $scope.data = newData;
          });
          externalAPI.pullData()
  
          // 5. Only thing that works fine : manually wire $scope data from the call
          $scope.data = externalAPI.data
          externalAPI.pullData().then(function(newData) {
              $scope.data = newData
          })
      }])
  </code></pre>
  
  <p>Manually wiring as in #5 defeats the purpose of data-binding, since I will be using the externalAPI service and pulling data from other parts of the app, and I want this data to always be fresh and reflected in the UI. What did I do wrong ?</p>
  
  <p>Note: I'm using Angularsjs 1.2.5, no jQuery or other js lib, just the SDK lib to access data (I have to, it does several unrelated but necessary things in the background).</p>