Eu estou trabalhando em um aplicativo Ajax usando jQuery e AngularJS.

Quando eu atualizo o conteúdo (que contém ligações AngularJS) de uma div usando o jQuery'shtml função, as ligações AngularJS não funcionam.

A seguir está o código do que estou tentando fazer:

$(document).ready(function() {
  $("#refreshButton").click(function() {
    $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")
  });
});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

Eu tenho conteúdo dinâmico dentro de uma div com o ID#dynamicContente eu tenho um botão de atualização que atualizaria o conteúdo desta div quando a atualização fosse clicada. Increment funciona como esperado se eu não atualizar o conteúdo, mas depois de atualizar, a ligação AngularJS pára de funcionar.

Isso pode não ser válido no AngularJS, mas eu inicialmente construí o aplicativo com jQuery e comecei a usar o AngularJS mais tarde, então não posso migrar tudo para o AngularJS. Qualquer ajuda para fazer isso funcionar no AngularJS é muito apreciada.