Я получаю TypeError: $().jqxGrid не является функцией

Я пытаюсь создать jqxGrid (JQWdidgets), используя директиву angularjs. Я пытаюсь получить доступ к идентификатору сетки, который был упомянут в директиве, и, следовательно, пытаюсь использовать функцию jqxGrid() для установки некоторых свойств сетки в контроллере. Но я получаю следующую ошибку

TypeError: $(...).jqxGrid is not a function 

У меня есть настройка проекта в git, и у проекта есть файл gulp. Я добавил задачу gulp для загрузки зависимостей для jqwidgets.

gulp.task('vendorScripts', function() {
    return gulp.src([
            'bower_components/**/dist/jquery.js',
            'bower_components/**/assets/javascripts/bootstrap.js',
            'bower_components/**/angular.js',
            'bower_components/**/angular-route.js',
            'bower_components/**/highcharts.js',
            'bower_components/**/modules/exporting.js',
            'bower_components/**/release/angular-ui-router.min.js',
            'bower_components/**/ui-bootstrap-tpls.js',
            'bower_components/**/dist/jquery.min.js',
            'bower_components/**/jqwidgets/jqxcore.js',
            'bower_components/**/jqwidgets/jqxdata.js',
            'bower_components/**/jqwidgets/jqxbuttons.js',
            'bower_components/**/jqwidgets/jqxscrollbar.js',
            'bower_components/**/jqwidgets/jqxmenu.js',
            'bower_components/**/jqwidgets/jqxcheckbox.js',
            'bower_components/**/jqwidgets/jqxlistbox.js',
            'bower_components/**/jqwidgets/jqxdropdownlist.js',
            'bower_components/**/jqwidgets/jqxgrid.js',
            'bower_components/**/jqwidgets/jqxgrid.sort.js',
            'bower_components/**/jqwidgets/jqxgrid.pager.js',
            'bower_components/**/jqwidgets/jqxgrid.selection.js',
            'bower_components/**/jqwidgets/jqxgrid.edit.js',
            'bower_components/**/jqwidgets/jqxangular.js'
        ])
        .pipe(plumber())
        .pipe(concat('vendor.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});



gulp.start('vendorScripts');

И вот как я использовал директиву:

<jqx-grid id="cs-grid" jqx-settings="$root.settings" jqx-source="$root.gridData"></jqx-grid> 

Моя реализация контроллера:

$scope.PageSize = 3;
            $rootScope.settings = {
                theme: 'bootstrap',
                width: '100%',
                height: '100%',
                selectionmode: 'none',
                sortable: true,
                pageable: true,
                pagermode: 'simple',
                pagerheight: 0,
                pagesizeoptions: [3, 5, 10],
                pagesize: $scope.PageSize,
                columns: $rootScope.columns,
                pagerrenderer: function() {
                    return '';
                },
                bindingcomplete: function() {
                    $scope.pagingInfo = $("#cs-grid").jqxGrid('getpaginginformation');
                    $scope.PageNum = 0; 
                }
            };

Я подозревал, что зависимости jqxWidget загружаются неправильно. Но когда я прошел через vendor.js, который генерируется gulp, я обнаружил, что соответствующие методы (jqxGrid и т. д.) были доступны.

Я изо всех сил пытаюсь решить эту ошибку. Пожалуйста, помогите мне,

заранее спасибо