No target defined error

问题:

I am using the library jQuery QueryBuilder in my angular 1.x application along with angular material. I am trying to display the query builder in a md-dialog but as soon as I click the button to open the dialog, I get the following error in the console and the dialog is not rendered.

ConfigError: No target defined
at Object.k.error (https://cdn.jsdelivr.net/jquery.query-builder/2.4.3/js/query-builder.standalone.min.js:7:11517)
at r.fn.init.$.fn.queryBuilder (https://cdn.jsdelivr.net/jquery.query-builder/2.4.3/js/query-builder.standalone.min.js:7:12512)

In the controller of the dialog I have the following code:

let filters = [{
    id: 'getCPU',
    label: 'getCPU',
    type: 'integer',
    input: 'number',
    value_separator: ','
}, {
    id: 'getIO',
    label: 'getIO',
    type: 'integer',
    input: 'number',
    value_separator: ','
}];

let operators = [{
    type: 'equal',
    optgroup: 'basic'
}, {
    type: 'not_equal',
    optgroup: 'basic'
}];

$scope.policyBuilderConfig = {
    filters: filters,
    operators: operators,
    sort_filters: true,
    conditions: ['AND', 'OR'],
    allow_groups: true
 };

$('#builder').queryBuilder(
    $scope.policyBuilderConfig
);

An example which reproduces this issue can be found here: JSFiddle

Is there anything else that I need to do to make it work in a dialog?