How would I re-instantiate an AngularJS controller after a change in data?

Question

I have looked, and assume this is simple, but just couldn't figure out the API documentation for this.

Assume I have a controller that pulls data when first called (I'm leaving out a ton, of course):

myCtrl = function ($scope, Data) {
  $scope.data = [];

  data_promise = Data.getData(); //a $http service
  data_promise.success(function (data) {
    $scope.data = data;
  });
}

That works great, and when the page loads I get $scope.data populated exactly as I need it. However, of course, the user may wish to update the data. Assume a simple service "Data.save()" called when a server clicks a "save" button on a form:

myApp.factory('Data', function ($http) {
  save: function (data) {
    $http({
      method: 'POST',
      url: 'someURL',
      data: data,
    }).success(function(){
      //something here that might trigger the controller to refresh
    });
  };
});

What would I put in the success callback that might re-instantiate the controller so that it has the most up-to-date data from the server? Currently I am having to refresh the page to get the updated data. I am not worried right now about minimizing server calls by cashing results and changes. I just need to get this to work first.

Thanks!

Answer 1

OK, although I am sure there is a better answer I have one for me. Essentially I am taking the important parts of the controller and placing them in the success callback. In order to keep it from looking messy, I have wrapped all the parts of the controller that need be updated in a named function.

myCtrl = function ($scope, Data, $q) {

// Binding the Data
  var updateAll;
  updateAll = function () {

    $scope.data1 = [];
    $scope.data2 = [];
    $scope.data3 = [];
    $scope.data4 = [];

    service_promise1 = Data.getData1(); //a $http service
    service_promise2 = Data.getData2();
    service_promise3 = Data.getData3();
    service_promise4 = Data.getData4();

    $q.all([service_promise1,service_promise2,service_promise3,service_promise4])
    .then(function([service1,service2,service3,service]){
      $scope.data1 = service1 + service2 //I know this isn't valid Javascript
      // just for illustration purposes
      $scope.data2 = service2 - service1 + service 3
      //etc...
    });
  };
  updateAll();


//Form Section  
$("#myForm').dialog({
  buttons: {
     Save: function () {
       Data.save(data).success(function(){
          updateAll();
        });
      }
    }
  });
}

Breaking this down, I have wrapped all the assignments to scope objects that rely on services into the updateAll function and invoke it on instantiation of the myCtrl. In the form that updates the data I call the updateAll() function upon success of the Data.save() function.

Not exactly brain surgery, I'll admit, but I had gotten confused with $scope.$apply() and thinking about just calling myCtrl(). That somehow seemed like the "Angular" way, but neither worked. I guess the controller function gets run only once on page refresh and there is no Angular way to call it again.

Answer 2

You do not need to refresh. Simply change the updated data in the ControllerScope.

This should work.

myApp.factory('Data', function ($http) {
  save: function (data, $scope) {
    $http({
      method: 'POST',
      url: 'someURL',
      data: data,
    }).success(function(){
      $scope.data = newData;
      //something here that might trigger the controller to refresh
    });
  };
});

// in your controller
Data.save(data, $scope);

But: You shouldn't do this way. This looks messy. Use services or events which you watch to wait for the changes comming back from the service.