Appending Angucomplete dynamically resets input - angularjs

Question

I have a UI in which I'm adding angucomplete as dynamic html. I have a directive that that compiles the html on add like this :
.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function (html) {
console.log('dynamic watch');
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
})
Now I have an add button which appends angucompletes text-boxes to the existing html which is in directive 'dynamic'. When I add an angucomplete all my previous selected values also get cleared. I don't understand why. I tried debugging angucomplete-alt.js but couldn't find the cause.
I have also used ng-tagsinput in the similar scenario and works great, when I add a new row the previous tags-input doesn't loose its selected value.
function recommendationHtml(recommedCount) {
var men = 'men';
var women = 'women';
var tblRecommend = ' <table id="tblid'+recommedCount+'" style="padding:5px;border-bottom:solid 1px;"> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon fa-inr fa-2x"></i> '
+ ' </td> '
+ ' <td> '
+ '<div class="item range range-positive"> '
+ '<label id="spanprice_' + recommedCount + '" name="spanprice_' + recommedCount + '">1000</label> '
+ '<input id="slider_' + recommedCount + '" type="range" step="500" name="slider_' + recommedCount + '" min="1000" max="50000" value="1000" '
+ ' onchange="angular.element(document.querySelector(\'#spanprice_0\')).val(this.value);"/> '
+ ' </div> '
+ ' </td> '
+ ' </tr> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon ion-bag fa-2x"></i> '
+ ' </td> '
+ ' <td> '
+ ' <tags-input ng-model="vendors' + recommedCount + '" id="vendors' + recommedCount + '" '
+ ' display-property="name" '
+ ' key-property="id" '
+ ' on-tag-added="storeTagAdded($tag)" '
+ ' on-tag-removing="storeTagRemoved($tag)" '
+ ' max-tags="1" '
+ ' placeholder="store"> '
+ ' <auto-complete source="loadVendors($query)"></auto-complete> '
+ ' </tags-input> '
+ ' </td> '
+ ' </tr> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon ion-bag fa-2x"></i></td> '
+ ' <td> '
+ '<div angucomplete-alt id="vendor' + recommedCount + '" placeholder="Search Store" '
+ 'pause="300" selected-object="selectedVendorPost" local-data="vendorData"'
+ ' search-fields="name" title-field="name" description-field="email"'
+ ' image-field="image" minlength="1" remote-url-data-field="name"'
+ ' input-class="form-control form-control-small"'
+ ' match-class="highlight" style="border-bottom: 1px solid;"'
+ ' ng-keydown="removedVendorPost($event,' + recommedCount + ')" >'
+ '</div>'
+ ' </td> '
+ ' </tr> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon ion-tshirt-outline fa-2x"></i></td> '
+ ' <td> '
+ '<div angucomplete-alt id="apparel_' + recommedCount + '" placeholder="Search apparel" '
+ 'pause="300" selected-object="selectedApparel" local-data="apparelData"'
+ ' search-fields="tagname" title-field="tagname" description-field=""'
+ ' image-field="" minlength="1" remote-url-data-field=""'
+ ' input-class="form-control form-control-small"'
+ ' match-class="highlight" style="border-bottom: 1px solid;"'
+ ' ng-keydown="removedApparel($event,' + recommedCount + ')" >'
//+ ' onkeydown="javascript:console.log(event:' + 'event.which' + 'value:' + ' this.value' + 'index:' + recommedCount + ');"'
+ '</div>'
+ ' </td> '
+ ' </tr> '
+ ' </table>';
return tblRecommend;
};
$scope.addRecommend = function() {
$scope.html = $scope.html + recommendationHtml($scope.recommedCount);
$scope.recommedCount = $scope.recommedCount + 1;
//$compile(recommendationHtml(0).contents())($scope);
};
.directive('dynamic', function($compile) {
return {
restrict: 'A',
replace: true,
link: function(scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
console.log('dynamic watch');
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
})
<div dynamic="html"></div>