Я работаю над приложением Ajax с использованием jQuery и AngularJS.

Когда я обновляю содержимое (которое содержит привязки AngularJS) div, используя jQueryhtml функция, привязки AngularJS не работают.

Ниже приведен код того, что я пытаюсь сделать:

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

У меня есть динамический контент внутри div с идентификатором#dynamicContent, и у меня есть кнопка обновления, которая будет обновлять содержимое этого div при нажатии на обновление. Инкремент работает должным образом, если я не обновляю содержимое, но после обновления привязка AngularJS перестает работать.

Это может быть недопустимо в AngularJS, но я изначально создал приложение с помощью jQuery и позже начал использовать AngularJS, поэтому я не могу перенести все в AngularJS. Любая помощь с работой в AngularJS очень ценится.