Apply jquery after rendering angularJS HTML - angularjs

Question

i have rendering HTML after AngularJS call
Its controller is
App.controller('controller', ['$scope', '$http', '$sce', '$routeParams', '$location', function ($scope, $http, $sce, $routeParams, $location) {
$http({
//http call
}).then(function (response) {
$scope.requestpurpose = $sce.trustAsHtml(response.data.requestpurpose);
$scope.$watch('requestpurpose', function(newValue, oldValue) {
if(typeof newValue != 'undefined'){
alert(newValue);
showAlreadySelected();
}
});
}]);
and its jquery script is
<script type="text/javascript">
// it will show the div depending on purpose of request
function showAlreadySelected(){
if ($("#1").is(":checked")) {
$("#veterinarian-info").show();
} else {
$("#veterinarian-info").hide();
}
}
</script>
This is my HTML
<div class="row purpose-box" >
<div class="col-sm-12" ng-bind-html="requestpurpose"></div>
</div>
and after ajax call below html is renering in ng-bind-html
<div class="boxes-check">
<div class="box-one">
<input checked="checked" rev="Annual exam" type = "checkbox" name = "request_purpose[]" ng-model=formData.request_purpose[1] onChange="angular.element(this).scope().changePurpose(this)" value = "1" class = "md-check" id = "1" >
</div>
<div class="box-two">
<label title="" for="1">
<span></span>
<span class="check"></span>
<span class="box"></span> Annual exam
</label>
</div>
</div>
<div class="boxes-check">
<div class="box-one">
<input checked="checked" rev="Spay or neuter surgery" type = "checkbox" name = "request_purpose[]" ng-model=formData.request_purpose[2] onChange="angular.element(this).scope().changePurpose(this)" value = "2" class = "md-check" id = "2" >
</div>
<div class="box-two">
<label title="" for="2">
<span></span>
<span class="check"></span>
<span class="box"></span> Spay or neuter surgery
</label>
</div>
</div>
but i am facing problem is after angular load its calling showAlreadySelected function but does not selected "#1" and one thing if any body can help is any Jquery function which will hit whenever input element with id "#1", "#2" render into my ng-bind-html div.

Answer 1

First, I would move the watcher outside the then because you're registering a new watcher everytime you make the ajax call.
I tried, it works to have a number as ID (but not recommended though). We'll need your HTML code as well cause it should work the way you've implemented. Is the #1 node added by the ajax call ( = present in $scope.requestpurpose) or is it always present in the DOM ?
Also, can you add a console.log in the showAlreadySelected function to be sure it's called.
EDIT
App.controller('controller', ['$scope', '$http', '$sce', '$routeParams', '$location', function ($scope, $http, $sce, $routeParams, $location) {
$http({
//http call
}).then(function (response) {
$scope.requestpurpose = $sce.trustAsHtml(response.data.requestpurpose);
showAlreadySelected();
});
}]);

Answer 2

I have bind class with DOMSubtreeModified to detect changes within a div
$('.purpose-box').bind("DOMSubtreeModified",function(){
showAlreadySelected();
});