jQuery knob - Rendering issues

Question

I'm trying to use a jquery knob in angular, and i've created a directive in order to use it.

Now, i've seen many jquery knob examples, and in most of them, there's the current value displayed in the centre of the dial...but not in my case! And also, how do i set the numbers to be WITHOUT DECIMALS?

Here's my html and angular directive code:

HTML

<knob ng-model="temp" value="0"></knob>
<input type="text" ng-model="temp">

knob.js

angular.module('knob', [])
    .directive('knob', function () {
        return {
            restrict: 'E',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {
                element.knob({
                    min: attrs.min,
                    max: attrs.max,
                    thickness: .2,
                    step: .5,
                    angleOffset: -125,
                    displayInput: true,
                    angleArc: 250,
                    change: function (value) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(value);
                        });
                    }
                });
                ngModel.$render = function () {
                    element.val(ngModel.$viewValue).trigger("change");
                };
            }
        };
    });

Here's how it looks on the browser:

And here how i'd like it to be (not talking about the color, but about the value displayed as INT in the middle)

Many thanks in advance

EDIT

As suggested, i replaced jquery knob with roundSlider, but i have a couple of issue that can be found here: http://jsbin.com/doketasuju/edit?html,output

1) Why do i have white background in a "diamond shape" style that i don't want?

2) If i type something in the input, it's not working!

This is an example on how i'm going to use it, but i need to fix this couple of issues first. Thanks

EDIT 2

Something like this to add labels:

And it should obviously display min and max values from the slider attributes

Answer 1

I have achieved your requirement with jQuery roundSlider plugin.

It supports the angular binding by inbuilt, so no need to create the custom directive externally for this.

Please check the demo from here:

http://jsbin.com/yoboruquvo/edit?html,output

For more details about roundSlider check the demos and documentation page.

Hope it helps you ...

Edit

1) By setting the slider bg color corresponding to the background you can solve this.

.rs-bg-color { background: gray; }

2) Solved the issue while using the directive.

Updated Demo: http://jsbin.com/puwefi/edit?html,output

Answer 2

For EDIT 2:

Currently there is no inbuilt option for label support. But you can achieve that functionality by using the internal code. Check the below demo:

http://jsbin.com/gazara/1/edit?html,output

Here by adjusting the margin values for .num1 span and .num2 span classes you can position the label.

Demo with half slider: http://jsbin.com/tamumo/edit?html,output