Search code examples
javascriptangularjspaginationangular-bootstrap

Error :$parse:Syntax while using pagination through angular bootstrap

I am having trouble using pagination on my tpl pages.

The problem that occurs while using pagination is

enter image description here

The output that is shown on the web page is this

enter image description here

The node and build tools version that i am using are

enter image description here

Code for showing pagination used in tpl and controller is

      <uib-pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize" items-per-page="itemsPerPage"  boundary-link-numbers="true"></uib-pagination>

I have also tried using this syntax

        <pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></pagination>

but same error and output exists.

Controller code is

                    $scope.topicList = response;
                    console.log(response);
                    $scope.totalItems = $scope.topicList.length;
                    $scope.currentPage = 1;
                    $scope.itemsPerPage = 10;
                    $scope.maxSize = 5;

                    $scope.setPage = function(pageNo) {
                        $scope.currentPage = pageNo;
                    };

                    $scope.pageCount = function() {
                        return Math.ceil($scope.topicList.length / $scope.itemsPerPage);
                    };

                    $scope.$watch('currentPage + itemsPerPage', function() {
                        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), end = begin + $scope.itemsPerPage;
                        $scope.topicDetails = $scope.topicList.slice(begin, end);
                    });

Bower.json file have 

  "dependencies": {
    "bootstrap": "~3.3.2",
    "angular": "~1.5.0",
    "angular-bootstrap": "~0.14.0",
    "angular-ui-router": "~0.2.15",
    "jquery": "~2.1.4",
    "jquery-ui": "~1.11",
    "fontawesome": "~4.3.0",
    "angular-dragdrop": "1.0.8",
    "angular-pretty-checkable": "~0.1.7",
    "angular-animate": "~1.4.0",
    "angular-resource": "~1.4.0",
    "angular-cookies": "~1.4.0",
    "angular-sanitize": "~1.4.0",
    "angular-translate": "~2.7.0",
    "angular-dynamic-locale": "0.1.27",
    "angular-translate-loader-static-files": "2.7.2",
    "angular-i18n": "~1.4.0",
    "requirejs": "2.1.16",
    "requirejs-text": "2.0.13",
    "require-css": "0.1.8",
    "requirejs-domready": "~2.0.1"
  },
  "devDependencies": {
    "angular-mocks": "~1.4.0",
    "angular-scenario": "~1.4.0"
  },
  "resolutions": {
    "angular": "~1.x"
  }

Package.json file have

{   name="dummy"
  "dependencies": {},
  "devDependencies": {
    "bower": "1.3.5",
    "chalk": "^0.5.1",
    "dateformat": "^1.0.11",
    "del": "^1.1.1",
    "event-stream": "3.1.5",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "0.0.7",
    "gulp-bower": "0.0.10",
    "gulp-browserify": "0.5.1",
    "gulp-compass": "1.1.8",
    "gulp-connect": "2.0.4",
    "gulp-flatten": "0.0.2",
    "gulp-imagemin": "0.5.0",
    "gulp-jshint": "1.5.5",
    "gulp-karma": "0.0.4",
    "gulp-livereload": "3.5.0",
    "gulp-load-utils": "0.0.4",
    "gulp-minify-css": "0.3.3",
    "gulp-minify-html": "0.1.3",
    "gulp-ng-annotate": "0.3.0",
    "gulp-ng-constant": "^0.3.0",
    "gulp-rename": "1.2.2",
    "gulp-replace": "0.2.0",
    "gulp-rev": "0.3.2",
    "gulp-ruby-sass": "1.0.0-alpha.2",
    "gulp-sass": "^2.1.1",
    "gulp-uglify": "0.2.1",
    "gulp-usemin": "0.3.1",
    "gulp-util": "^3.0.3",
    "gulp-watch": "^4.1.0",
    "jshint-stylish": "~2.0.1",
    "karma": "0.12.16",
    "karma-chrome-launcher": "0.1.4",
    "karma-html2js-preprocessor": "0.1.0",
    "karma-jasmine": "0.2.2",
    "karma-phantomjs-launcher": "0.1.4",
    "karma-requirejs": "0.2.2",
    "karma-script-launcher": "0.1.0",
    "lodash": "2.4.1",
    "minimist": "^1.1.0",
    "multipipe": "^0.1.2",
    "proxy-middleware": "0.5.0",
    "vinyl-paths": "^1.0.0",
    "zeparser": "0.0.7"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

Angular version that i am using is specified in bower.json file

Please provide the solution for this.

Solution

  • The Problem persist because :: operator in expression is introduced in angularjs 1.3 version whereas i have upgraded the version in bower.json but still the version that was showing in angular was 1.27.2 so i removed the lib/bower_components folder and reinstall the dependencies and finally it worked now.