title: Angular JS. Refresh a list after promise completes
body: <p>I have a model that I am using to hold my data in angular:</p>
  
  <pre><code>var FuelProcessingModel = function (carrierService) {
      this.myArray = [];
  };
  </code></pre>
  
  <p>That model has an array of MyObjects that I get from the DB:</p>
  
  <pre><code>var MyObject = function () {
      //stuff
  }
  </code></pre>
  
  <p>I update this using a REST call:</p>
  
  <pre><code>$scope.add = function () {
          var myObject = new MyObject();
          $scope.model.MyObjects.push(myObject);
          service.add(myObject);
      };
  </code></pre>
  
  <p>Which I use a service to hit the Server:</p>
  
  <pre><code>this.add = function (myObject) {
          $http({
              method: "POST",
              url: "theServer",
              data: myObject
          });
      }
  </code></pre>
  
  <p>The REST service just adds to the database, It doesn't return anything.
  I need to reload the data from the database after the update is finished, so that my records now have all newly associated ID's and pertinent data.</p>
  
  <p>I cannot just do:</p>
  
  <pre><code>window.location.reload();
  </code></pre>
  
  <p>The user starts by selecting a value from a drop down list to decide which list of data they start off seeing. I cannot / do not want to pass the value to it, mainly because it is in its own partial view, with its own controller, because it is used on many pages.</p>
  
  <p>I tried doing: </p>
  
  <pre><code>$scope.add = function () {
          //same as above
          //this
          service.get().then(function(result) { $scope.model.myArray = result.data; });
      };
  </code></pre>
  
  <p>Obviously the problem here is the promise isn't complete before the DOM reloads the page. So the user saw themself add an item to the array and it vanished.</p>
  
  <p>Do I want to load the page after the promise is complete? (How would I do that?)
  should I return the updated data from the REST service and reset the current value? (seems like the same promise issue)</p>
  
  <p>Is there a better practice that I do not know about?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>For Bergi:</p>
  
  <pre><code>this.get = function (key) {
          return $http({
              method: "GET",
              url: "theServer" + key
          })
              .success(function (data) {
                  return data;
              });
      }
  </code></pre>