Estoy trabajando en una aplicación Ajax utilizando tanto jQuery como AngularJS.

Cuando actualizo el contenido (que contiene enlaces AngularJS) de un div usando jQuery'shtml función, los enlaces AngularJS no funciona.

El siguiente es el código de lo que estoy tratando de hacer:

$(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>

Tengo contenido dinámico dentro de un div con el ID#dynamicContent, y tengo un botón de actualización que actualizaría el contenido de este div cuando se haga clic en actualizar. El incremento funciona como se esperaba si no actualizo el contenido, pero después de actualizar, el enlace de AngularJS deja de funcionar.

Puede que esto no sea válido en AngularJS, pero inicialmente creé una aplicación con jQuery y comencé a usar AngularJS más tarde, así que no puedo migrar todo a AngularJS. Cualquier ayuda para hacer que esto funcione en AngularJS es muy apreciada.