title: AngularJS: ui-router Redirect view on success & refresh scope with new contents
body: <p>I am migrating from ng-view to ui-view.</p>
  
  <p>In my controller, upon successful create / update / delete, I would like to redirect to an index view with the newly updated / created / deleted data.</p>
  
  <p>I currently do this using <code>$state.go</code>.</p>
  
  <pre><code>app.controller('AdminSupplierCreateController', ['$scope', '$state', 'Supplier', 
      function ($scope, $state, Supplier) {
          $scope.h1 = "Register a new Supplier";
  
          $scope.store = function()
          {
              Supplier.post($scope.supplier)
                  .then(
                      function() {
                          console.log("Successfully Created Supplier");
                          $state.go('admin.supplier');
                      },
                      function(response) {
                          console.log("Error with status code: " + response.status);
                      }
                  );
          };
  }]);
  </code></pre>
  
  <p>The problem is that when the $state is changed, the scope is not updated. It appears as though the original <code>admin.supplier</code> scope data is not being refreshed.</p>
  
  <p>I have tried refreshing the <code>ui-view</code> with <code>$state.reload()</code> before setting the scope in <code>AdminSupplierIndexController</code>.</p>
  
  <pre><code>app.controller('AdminSupplierIndexController', ['$scope', '$state', 'suppliers', 
      function ($scope, $state, suppliers) {
          $state.reload();
          $scope.suppliers = suppliers;
  }]);
  </code></pre>
  
  <p>Doing this makes the get request to <code>api/v1/suppliers</code>, however it doesn't actually show the updated scope unless I either hit the refresh button on the browser or manually navigate to a different state, then navigate back again.</p>
  
  <pre><code>$stateProvider
      ...
      .state('admin.supplier', {
          url : "/supplier",
          templateUrl : 'templates/admin/supplier/index.html',
          controller: "AdminSupplierIndexController",
          resolve: {
              suppliers: ['Supplier', function(Supplier) {
                  return Supplier.getList();
              }]
          }
      })
      .state('admin.supplier.create', {
          url : "/create",
          templateUrl : 'templates/admin/supplier/create.html',
          controller: "AdminSupplierCreateController"
      })
  </code></pre>
  
  <p>Solution:</p>
  
  <pre><code>app.controller('AdminSupplierCreateController', ['$scope', '$state', 'Supplier', 
      function ($scope, $state, Supplier) {
          $scope.h1 = "Register a new Supplier";
  
          $scope.store = function() {
              Supplier.post($scope.supplier)
                  .then(
                      function() {
                          console.log("Successfully Created Supplier");
  
                                              // Force Reload on changing state
                                              $state.go('admin.supplier', {}, {reload: true});
                      },
                      function(response) {
                          console.log("Error with status code: ", response.status);
                      }
                  );
          };
  }]);
  </code></pre>