title: How to update $scope object without reload of page?
body: <p>Howdie do,</p>
  
  <p>So I'm returning an dictionary from Python that is then jsonify'ed before passing it to angular. </p>
  
  <p>For example, this is the dictionary that I'm returning from my Python:</p>
  
  <pre><code>the_dict = {"success": False, excludedPkgs: ['12345', '45678'], message:'Failed to depart pkgs'}
  
  return jsonfiy(the_dict)
  </code></pre>
  
  <p>This dictionary contains a status, a list of excluded packages and an error message. </p>
  
  <p>The result is returned to angular via a dataFactory function and updates the $sessionStorage if the status is False</p>
  
  <pre><code>departedFromPackages: function(ids, user_id){
          $http({
            method: 'POST',
            url: urlBase + 'depart/pkg/',
            data: {'order_id': ids, 'user': user_id}
          }).then(function(res){
           if (res.data.success == false) {
              $storage.failedPkgs = res.data.excludedPkgs;
           }
  
          });
        }
  </code></pre>
  
  <p>Now in my Packages controller, I automatically get the $storage.failedPkgs and setup a $scope.$watchCollection, what I hoped would automatically show the updated values in the console:</p>
  
  <p>Packages Controller</p>
  
  <pre><code>$scope.failedPkgs = dataFactory.getFailedPkgs();
  
      $scope.$watchCollection('failedPkgs', function (newVal, oldVal){
          console.log(newVal, oldVal)
      });
  </code></pre>
  
  <p>Now, the issue is that the console initially shows undefined when you load the packages.html screen, which makes sense. The user has to click a departed button that will attempt to depart a package which basically means taking the package information and injecting it into a database table.</p>
  
  <p>However, if you attempt to depart a package that already has been departed, SQLAlchemy will return an integrity error as you can't place duplicate orders into the database. </p>
  
  <p>That's when the dictionary above is returned with a False status and list of the failed packages.</p>
  
  <p>I say all of that to say, the $scope.failedPkgs will only show the updated values AFTER you reload the screen.</p>
  
  <p>So my question is, how do I get angular to instantly update the $scope.failedPkgs without having to reload the page? Or must you reload everytime?</p>
  
  <p>**** UPDATE ****</p>
  
  <p>When I console the res.data.excludedPkgs in the POST requests, it does show the updated value instantly, but the controller doesn't see the value til a reload:</p>
  
  <pre><code>departedFromPackages: function(ids, user_id){
          $http({
            method: 'POST',
            url: urlBase + 'depart/pkg/',
            data: {'order_id': ids, 'user': user_id}
          }).then(function(res){
           if (res.data.success == false) {
              console.log(res.data.excludedPkgs)
              $storage.failedPkgs = res.data.excludedPkgs;
              console.log($storage.failedPkgs)
           }
  
          });
        }
  
  [1222822, 1222826, 1222819]
  </code></pre>
  
  <p>**** UPDATE ****</p>
  
  <p>This is the function that is returning the $storage.failedPkgs</p>
  
  <pre><code>getFailedPkgs: function(){
          return $storage.failedPkgs;
        },
  </code></pre>
  
  <p>**** UPDATE ****</p>
  
  <p>This is the function that is called via the onClick event for the departed button:</p>
  
  <pre><code>$scope.departed = function() {
              var selectedRows = [];
              $('.select-row-cb').each(function(){
                  if ($(this).is(':checked')) {
                      selectedRows.push($(this).val());
                  }
              });
  
              if (selectedRows.length &gt; 0) {
                  showProgressDialogueBox('Departing Package');
                  if (selectedRows.length == $scope.dataTable.data().length) {
                      // All packages in wave are selected; Generate the entire wave
                      $scope.allPkgDeparted = 1
                      dataFactory.departedFromWaves($scope.waveid, $scope.user);
                  } else {
                      dataFactory.departedFromPackages(selectedRows, $scope.user);
                   }
              }
          }
  </code></pre>