Angular.js Directive that monitors the results of requests to the server API

Question

JavaScript

I'm still green in Angular, so questions often arise about how to do certain things correctly.
I want to implement the following functionality:
For example, we have an admin panel. I want its layout to have a directive that will display the result of a request to the server API in the form of some text (for example, 'success' or 'try later'). That is, the user corrects something there, clicks "Save" and he was displayed: "OK" or "not ok" - after the response from the server.
Accordingly, there are a lot of different controllers and views, and it’s not very clear to me how to transfer all this between all of them. The communication with the server itself occurs through services.
Keep track of some global variable that changes in response to requests? - somehow not a very option, in my opinion.
I saw in Google the option with the service. That is, the directive monitors the service, and the service marks success or error based on the server response. But I have more than one service. Then it turns out that it will be necessary to connect all services to the directive and monitor the results of all executions. It's somehow difficult. And every time you write a new service, you will have to remember to connect it to the directive as well.
It seems to me that you can somehow do it well and correctly, I just don’t know how yet. Actually this is the question - what is the best way to do it?

Answer 1

.controller('MyCtrl', function ($scope, myDataProvider, flashBag) {
    myDataProvider.getData()
        .then(function () {
              flashBag.success('All done!');
        }, function () {
              flashBag.error('Something went wrong...');
        });
})

something like this. There are enough
implementations