title: AngularJS two way binding for remote data array and local copy
body: <p>In my application i need to get remote orders data, identified by <code>orderId</code>.
  When i fetch a remote order i have to store in local memory, for further modifications inside the app.
  So in my angularjs app i would to create a method (or property) in the controller which, given an <code>orderId</code>, returns the local copy of the order, or, if it does not exists, start downloading it from remote server, possibly automatically binding when finished.</p>
  
  <p>Is there a binding pattern which can i use?</p>
  
  <p>I've tried this:</p>
  
  <p>Controller:</p>
  
  <pre><code>$scope.ordersDetails = function()
  {
      return ordersService.getOrderDetail($scope.orderId);
  }
  </code></pre>
  
  <p>Service:</p>
  
  <pre><code>   var orderDetails = [];
     var _loadOrderDetail = function (orderId) {
        return $http.get(----).then(function (results) {
          _parseOrder(results.data);
        });
     };
     var _parseOrder = function(orderJson) {
         orderDetails[orderJson.OrderDetail.ID] = .......
     }
      var _getOrderDetail = function (orderId)
      {
          if (!orderDetails[orderId])
          {
              orderDetails[orderId] = [];
              // start downloading from remote server
              _loadOrderDetail(orderId);
              return;
          }
          return orderDetails[orderId];
  
      }
      ordersServiceFactory.getOrderDetail = _getOrderDetail;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!--
  ordersDetails().orderDetails is a json object
  ordersDetails().orderItems is an array of json objects.
  --&gt;
  
  &lt;div&gt;{{ordersDetails().orderDetails.Customer}}&lt;/div&gt;
  &lt;div class="item" ng-repeat="orderItem in ordersDetails().orderItems"&gt;
    {{orderItem.ID}}
  &lt;/div&gt;
  </code></pre>
  
  <p>But i don't know if it is a good pattern; moreover the ng-repeat directive is not working.</p>
  
  <p>Thanks.</p>