Using AngularJS to reload data in Bootstrap tabs

Question

I have two Bootstrap tabs on my Angular page as follows:

<div>
    <ul class="nav nav-tabs">
        <li class="active strong">
            <a data-target="#home" data-toggle="tab">Tab 1</a>
        </li>
        <li class="strong">
            <a data-target="#pairs" data-toggle="tab">Tab 2</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <div ng-include="partial_1.html"></div>
        </div>
        <div class="tab-pane fade" id="pairs">
            <div ng-include="partial_2.html"></div>
        </div>
    </div>
</div>

Both of the partials have their own controllers defined in the partial_X.html. The two tabs have their own data and business logic, but if the user changes data on server while being on the second tab, the first tab's content should be reloaded from the server (or at least when the user goes to the first tab).

When the tab is clicked, the reload doesn't happen of course, since the controllers have already been instantiated. The data gets reloaded only after a browser refresh on the page as the controller gets initialized again.

Is there a way to reload the controller when the Tab 1 is clicked? I could also combine the two sub controllers into a single one, but that sounds like a dirty workaround for my problem.

Answer 1

Have the controller that changes the data broadcast an event and the controller that needs to update listen to that event. The event will have to be broadcasted on the $rootScope:

Controller that changes the data:

changeData().then(function() {
    $rootScope.$broadcast("importandDataChanged");
});

Controller that needs to update:

$scope.$on("importandDataChanged", function() {
    // signal that data changed, lazy load when the tab is actually clicked
    $scope.importantData = null;
});

// let $scope.active be a flag that is true when the tab is active
$scope.$watch("active", function(newvval) {
    if( newval && $scope.importantData === null ) {
        loadData();
    }
});

The implementation of the active flag depends on the toolkit you are using (with Bootstrap, I'd suggest going with Angular UI Bootstrap).