initializing angular after DOM has changed, doesn't work - angularjs

Question

I'm trying to re-initialize my angular app, so it will re-render the DOM since I injected elements after loading.
This is the short version of my angular function:
JS
(function(angular) {
'use strict';
angular.module('myApp', ['ui.bootstrap'])
.controller('Controller', function($scope, $http) {
$scope.highlighter1 = function(side, string, load) {
highlighter.deserialize(string);
};
$http.get('/comments')
.success(function(response) {
$scope.comments = response;
var allEl=[];
var i;
for (i=0; i<response.length; i++) {
allEl.push(response[i]._id);
}
$http.post('/ranges', {"commentIds":allEl})
.success(function(result){
result.forEach(function(item){
$scope.highlighter1(item.dataAction, item.rangyObject, true);
})
})
});
angular.bootstrap(document.getElementsByTagName('span'),['myApp']);
})
})(window.angular);
my 's are injected when I run the deserializing of the highlighter object. I'm also assigning them attributes of uib-popover, so in the end I have 's in my documents with these attributes, and I'm re-rendering them when calling on angular.bootstrap again on them.
They are being rendered (when I try to manually call it again from the console it says that it fails because these elements are already rendered), but the pop-over still doesn't do what it's supposed to do (when I click it doesn't popover).
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
body {
color: #595959;
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
}
.highlight-a {
display: inline-block;
background-color: #99c2ff;
border: 1px solid #7699d1;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
color: #223f7a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #e1e1e8;
}
HTML
<div ng-repeat="i in comments">
<div id={{i._id}} class="task" commentId={{i._id}}> {{i.text}} </div>
</div>