Angular ng-if with Kendo UI autocomplete issue - angularjs

Question

I've just created an autocomplete Kendo input field inside a div which has to be controlled by a ng-if, because it has to be shown only to a particular category of users.
But I finally get rendered on my browser only a normal input field with no autocomplete properties.
If I remove the ng-if directive or even if I transform it to ng-show it works properly.
This is my HTML:
<div ng-if="utenteProfilo=='PB'">
<label for="PB" class="col-sm-2 control-label">PB</label>
<div class="col-sm-4">
<input ng-model="codPB" class="cento" id="codPB" />
<input type="hidden" id="cognomePb" name="cognomePb" />
<input type="hidden" id="nomePb" name="nomePb" />
</div>
</div>
This is my JS:
$("#codPB").kendoAutoComplete({
placeholder: "Scegliere un PB...",
dataTextField: 'PBanker',
filter: "contains",
autoBind: false,
minLength: 3,
headerTemplate: '<div class="dropdown-header k-widget k-header">' +
'<span>Cognome</span>' +
'<span>Nome</span>' +
'</div>',
template: '<span class="k-state-default" ></span>' +
'<span class="k-state-default"><h6 data-recordCognomePB="#= cognome #" data-recordNomePB="#= nome #">#: data.cognome # #: data.nome #</h6></span>',
select: function(e) {
var cognomePb = e.item.find('h6').attr('data-recordCognomePB');
var nomePb = e.item.find('h6').attr('data-recordNomePB');
$('#cognomePb').val(cognomePb);
$('#nomePb').val(nomePb);
},
filtering: function(e) {
$('#cognomePb').val('');
$('#nomePb').val('');
},
dataSource: {
schema: {
parse: function(response) {
var length = response.length;
var dataItem;
var idx = 0;
for (; idx < length; idx++) {
dataItem = response[idx];
dataItem.PBanker = dataItem.cognome + " " + dataItem.nome;
}
return response;
}
},
serverFiltering: true,
transport: {
read: {
url: "http://myFile.json",
data: function(){
return {pb: $('#codPB').val()}
}
}
},
},
});
Do you know any issues about this behavior? Am I acting something wrong?

Answer 1

Try to avoid querying the DOM (with $("#codPB").kendoAutoComplete()) when using angular. You are mixing two different approaches.
In this case, Kendo provides directives to work with angular, see this demo:
HTML
<input kendo-auto-complete ng-model="country"
k-data-source="countryNames" style="width: 100%;" />
JS
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
//[...]
"Ukraine",
"United Kingdom",
"Vatican City"
];
});
The other solution (less elegant) is to use ng-show instead of ng-if.