ng-dial is an interactive dial directive for Angular.js

ng-dial angular module


Stars : 10

Forks : 10

Created by Gordon Dent

bower install angular_knob

Demo Download GitHub

An Angular.js Interactive Dial

An visual component for gathering user input when values sit in a range between 0-100. Find a demo here.

Originally a JSFiddle this has now been turned into a ready-to-use Angular.js directive.


  • interactive
  • animated
  • shows previous value
  • 2-way data binding (will respond to changes to model and update model accordingly)


  • value
  • animate - either true or false. Default: false
  • startAngle - 0-360. Default: 0
  • endAngle - 0-360. Default: 360
  • innerRadius - An integer. Default: 60
  • outerRadius - An integer. Default: 100
  • clickable- either true or false. Default: true


In order to use in your project you will need to:

  1. include dial.js as one of your source files e.g <script src="js/dial.js">
  2. include dial.css for styling e.g. <link rel="stylesheet" href="css/dial.css" type="text/css">
  3. include gmd.dial as a dependency of your Angular app e.g. var app = angular.module('dialExampleApp', ['gmd.dialplot']);
  4. include a dial inside a template <gmd-dial value="initialValue"></gmd-dial>

Setup Example

Clone the repository

git clone
cd ng-dial
npm install
bower install
node app.js

Go to http://localhost:3000 to see example radial plots.


Javascript plugin