How to avoid repeated script execution?

There is a project on angular, and in it there are tabs with content that is loaded when switching.

<ul class="serv-tree-nav"> <li ui-sref-active="active" ng-show="auth.showRestricted"><a ui-sref="pages.services({categoryId: 'favorites'})"><span class="pic favorites"><img class="svg-img" src="../images/serv-tree-item-10.svg" alt=""></span><span class="text">{{'PAYMENTS.FAVORITE' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 'all'})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-1.svg" alt=""></span><span class="text">{{'PAYMENTS.ALL_PAYMENTS' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.cardtocard"><span class="pic"><img src="../images/serv-tree-item-2.svg" alt=""></span><span class="text">{{'PAYMENTS.CARD_TO_CARD' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 33})" ng-click=""><span class="pic"><img class="svg-img" src="../images/serv-tree-item-3.svg" alt=""></span><span class="text">{{'PAYMENTS.MOBILE' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 44})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-4.svg" alt=""></span><span class="text">{{'PAYMENTS.HOSTING' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 39})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-5.svg" alt=""></span><span class="text">{{'PAYMENTS.WEBMONEY' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 34})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-6.svg" alt=""></span><span class="text">{{'PAYMENTS.INTERNET' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 40})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-7.svg" alt=""></span><span class="text">{{'PAYMENTS.GAMES' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 37})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-8.svg" alt=""></span><span class="text">{{'PAYMENTS.COMMUNAL' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 38})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-9.svg" alt=""></span><span class="text">{{'PAYMENTS.CREDIT' | translate}}</span></a></li> <li ui-sref-active="active"><a ng-click="toService('nonContractExternal')"><span class="pic"><img src="../images/recvizits.svg" alt=""></span><span class="text">{{'PAYMENTS.RECVIZ' | translate}}</span></a></li> <li ui-sref-active="active"><a ui-sref="pages.services({categoryId: 'other'})"><span class="pic"><img class="svg-img" src="../images/serv-tree-item-11.svg" alt=""></span><span class="text">{{'PAYMENTS.OTHER' | translate}}</span></a></li> </ul> 

The controller has a jQuery script that pulls images from the img - svg tags, replaces them with a picture so that you can further change the color of the icon when switching tabs, the active tab.

 $(document).ready(function() { $('.svg-img').each(function(){ var img = $(this); var image_uri = img.attr('src'); $.get(image_uri, function(data) { var svg = $(data).find('svg'); svg.removeAttr('xmlns:a'); img.replaceWith(svg); }, 'xml'); }); }); 

The problem is that every time you switch over a tab, the code is re-executed and thus performs a bunch of requests and loads the network. (I don’t know how to explain this. In general, there are a lot of requests in the network tab in debugging). How to avoid it?