AngularJS or browser cache template?

Question

JavaScript

I use this code:

app.controller('MakeOrders', ['$scope', '$compile', function($scope, $compile) {
  $scope.showOrder = function(id){
    $('.col-lg-3').css('width','30%');
    var title_id = '00000'.substr(0,5-id.toString().length)+id;
    $('.arrow-back').show();
    $('.panel-header h1').text('Заказ №'+title_id);
    $('.col-lg-3').addClass('click').attr('onclick','Orders.backHome();');
    $('.panel-search-box,.panel-content').hide();

    var compiledeHTML = $compile("<div order-Info></div>")($scope);
    $(".panel-content").after(compiledeHTML);
    }

}]);

app.directive('orderInfo', function() {
  return {
    templateUrl: '/res/admin/order-info.html'
  };
});

This is just part of the code. In general, everything is displayed normally. But, when I open another order, the same content as from the first one appears. But the strangest thing is that the content is cached (sort of). I used $templateCache.removeAll() does not help, writes an error. I don't understand how to properly clear the information if I open a new order?
And what is the best thing to do in this situation? When I open an order in AJAX and get JSON , which I use to display information in this html

Answer 1

Angular caches templates, and the browser also caches requests.
And for data, you need to use unique urls, either mark them as not cacheable, or use non-cached post / put or websockets requests. $http should help with that.