AngularJS, $compile when an event occurs, how to do?

Question

Angular

There is an application with push State navigation, which is implemented on History.js. There is a news page, news is added by the usual ng-repeat. The goal is to get the news page and resume bindings. This is how I get the template:

$.getJSON(url, {}, function (data) {
    if (data.status == 1) {
        $('#container').html(data.template);
        History.pushState({}, '', url);
    }
})

That is, changing the link through the history, changing the content through replacing the DOM, how to do the same, but so that the bindings work?
Something like this is needed:

app.directive('customHtml', function($compile, $http){
  return {
    link: function(scope, element) {
      $http.get('template.html').then(function (result) {
        element.html($compile(result.data)(scope));
      });
    }
  }
})

Only now, the problem is that the directive should not make a request, but receive a variable with a template, and at the same time, only after going through the page.
The transitions themselves are made in the form of events on buttons with the appropriate class, there are many links.
Thanks in advance!

Answer 1

There is an application with push State navigation, which is implemented on History.js.

It is not clear why ngRoute / uiRouter did not suit you ... They only created problems for themselves.
Well, do it in the service ... I don't see a problem. $compile is available to you wherever you inject it. If you do it by analogy with ngRoute, you will have a service that resolves the state, creates a scope, detects what needs to be loaded, etc. according to the rules defined in the provider and pass it all to the directive that will replace the view.