How to update data in AngularJS Controllers using $hhtp.get() for the second time without reloading the page

I have a view as follows (shortened for brevity):

<ul class="nav nav-tabs nav-stacked">
    <li ng-repeat="i in range">
        <a id="list{{i}}" ng-click="ShowList(i)">
            List Item {{i}}
        </a>
    </li>
</ul>

<ng-switch on="listItemType">
    <div ng-switch-when="1">
        <form-a></form-a>
    </div>
    <div ng-switch-when="2">
        <form-b></form-b>
    </div>
    <div ng-switch-when="3">
        <form-c></form-c>
    </div>
</ng-switch>  

<form-a>, <form-b>, <form-c> are angular directives that load a templateUrl and have Controllers of their own.

The controller of the above view is:

var listCount;
var listIds = [];
$http.get('/api/lists').
    success(function(data) {
        $scope.lists = data.lists;

        for (listCount = 1; listCount <= $scope.lists.length; listCount++) {
            listIds.push(listCount);
        }

        $scope.range = listIds;
    });
$scope.ShowList = function(listNumber) {
    $scope.listItemType = $scope.lists[listNumber - 1].listType;
};

As can be seen, this controller fetches some data using $http.get().
Now, the controller for <form-a> posts some data. This updates the same data that the above controller had fetched. In other words, I need a new entry in the <li> tags at the beginning of the view.

However, the controller for the page has already done a $http.get() request. How do I ask it to get the data again so that the lists information in the first controller gets updated? In other words, on the event that the data has changed, is there an event handler in the first controller that I could use to $http.get() the data again?
Since the page is not refreshed or reloaded, the controller, with my above code calls the $http.get() only once and if the controller of the directives in the same page updates the data, there is no way for the first controller to update its data.


ANSWERS:


You would just wrap that $get call in a function and call it again.

We'll probably need to see more of what you have going... but consider this:

function ParentCtrl($scope, $http) {
   $scope.foo = [];

   $scope.loadFoo = function () {
       $http.get('/foo/data')
            .success(function(data) {
               $scope.foo = data;
            });
   };

   $scope.loadFoo();
}

function ChildCtrl($scope) {
   $scope.loadFoo(); //still here from Parent scope.
}

But again, you really didn't give enough information to answer your question, because since you're using directives, if you isolated the scope, you'll have to pass a reference to your loadFoo() method:

app.directive('testDir', function (){
   return {
     restrict: 'E',
     scope: {
       'loadFoo': '&'
     },
     link: function(scope) {
       scope.loadFoo();
     }
   }
});

To be used as:

<test-dir load-foo="loadFoo()"></test-dir>


 MORE:


 ? Modify $rootscope property from different controllers
 ? Two-way binding faulty when used with a popup directive
 ? One directive for several elements
 ? angular.js - evalAsync not called
 ? Angular execution order with `$q`
 ? Angular execution order with `$q`
 ? Angular execution order with `$q`
 ? Using the $q service with angular
 ? Angular $q catch block resolves promis?
 ? How to use $http promise response outside success handler