How to update data in blocks received from different web services on the same page using JS?

Question

JavaScript

Hello!
Please tell me how to update data in blocks on the same page received from different web services?
There are 5 pcs. (there will be more) RPi with sensors that run web services that send data on request in the form of json. There is one main web service that stores information about the IP addresses of all devices (web services).
Implemented FrontEnd, on which, using AngularJS, I implemented the output of a list of blocks via ng-repeat (based on data received from the main service with information about the number of web services and their addresses).
The block is a regular DIV that contains:
- Two buttons (start/stop - start/stop individual tasks on the remote RPi)
- Indicator-1, Indicator-2, Indicator-3, Status
Accordingly, 5 such blocks should be displayed on the page, the indicators of which should be automatically updated after a specified time interval?
It is not very logical to write separate controllers for each block manually. the number of devices is dynamic (web services) and you don’t want to edit the JS code every time you add or remove it.
The question is how best to do it?
Thank you!

Answer 1

However, I did it differently ...
In the service, I implemented uploading data to firebase, and through Angular I made them binding using ng-repeat.
Everything works perfectly, without timers and multiple services.
Thanks to all!

Answer 2

Сделать N сервисов, с одинаковым интерфейсом для взаимодействия с тем или иным API.
Сделать базовый контроллер для компоненты, который получает на вход такой сервис и используется.
Сделать контроллеры для сервисов, которые будут просто вызывать конструктор базового инжектя туда определенный сервис.

Answer 3

inlcudeHTML и загрузка блоков внутри таймера в бесконечном режиме.