JQX Grid Angular - multiple grids

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
 <div ng-app="demoApp">
 <div ng-controller="demoController">

        <jqx-slider ng-model="value" jqx-settings="sliderSettings"></jqx-slider>
        {{value}}
    </div>
</div>

JavaScript

var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) { 
            $scope.value = 3;
            
            $scope.sliderSettings = {
                 width: 400, 
                 height: 60, 
                 min: 1,
                 max: 5,
                 step: 0.5,
                 ticksFrequency: 1,
                 mode: 'fixed',
                 value: 1,
                 tooltip: true,
                 tooltipFormatFunction: function (value) {
                     return new Number(value).toPrecision(2);
                 },
                 minorTicksFrequency: 0.5, 
                 showTickLabels: true
                 };
        });