diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..c8474bf
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components/"
+}
diff --git a/.gitignore b/.gitignore
index 7bf6eb1..0173852 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 bower_components
 node_modules
+coverage
diff --git a/angular-progress-arc.js b/angular-progress-arc.js
index 5213e77..8ef0c23 100644
--- a/angular-progress-arc.js
+++ b/angular-progress-arc.js
@@ -2,9 +2,8 @@
 
     'use strict';
 
-    var app = angular.module('angular-progress-arc', []);
-
-    app.provider('progressArcDefaults', function () {
+    angular.module('angular-progress-arc', [])
+    .provider('progressArcDefaults', function () {
 
         var defaults = {
             size: 200,
@@ -27,9 +26,8 @@
                 });
             };
         };
-    });
-
-    app.directive('progressArc', ['progressArcDefaults', function (progressArcDefaults) {
+    })
+    .directive('progressArc', ['progressArcDefaults', function (progressArcDefaults) {
         return {
             restrict: 'E',
             scope: {
@@ -40,41 +38,38 @@
                 complete:         '&', // Expression evaluating to float [0.0, 1.0]
                 background:       '@'  // Color of the background ring. Defaults to null.
             },
-            compile: function (element, attr) {
-
-                progressArcDefaults(attr);
+            link: function (scope, element, attr) {
+                progressArcDefaults(scope);
 
-                return function (scope, element, attr) {
-                    // Firefox has a bug where it doesn't handle rotations and stroke dashes correctly.
-                    // https://bugzilla.mozilla.org/show_bug.cgi?id=949661
-                    scope.offset = /firefox/i.test(navigator.userAgent) ? -89.9 : -90;
-                    var updateRadius = function () {
-                        scope.strokeWidthCapped = Math.min(scope.strokeWidth, scope.size / 2 - 1);
-                        scope.radius = Math.max((scope.size - scope.strokeWidthCapped) / 2 - 1, 0);
-                        scope.circumference = 2 * Math.PI * scope.radius;
-                    };
-                    scope.$watchCollection('[size, strokeWidth]', updateRadius);
-                    updateRadius();
+                // Firefox has a bug where it doesn't handle rotations and stroke dashes correctly.
+                // https://bugzilla.mozilla.org/show_bug.cgi?id=949661
+                scope.offset = /firefox/i.test(navigator.userAgent) ? -89.9 : -90;
+                var updateRadius = function () {
+                    scope.strokeWidthCapped = Math.min(scope.strokeWidth, scope.size / 2 - 1);
+                    scope.radius = Math.max((scope.size - scope.strokeWidthCapped) / 2 - 1, 0);
+                    scope.circumference = 2 * Math.PI * scope.radius;
                 };
+                scope.$watchCollection('[size, strokeWidth]', updateRadius);
+                updateRadius();
             },
             template:
                 '<svg ng-attr-width="{{size}}" ng-attr-height="{{size}}">' +
-                    '<circle class="ngpa-background" fill="none" ' +
+                    '<circle fill="none" ' +
                         'ng-if="background" ' +
                         'ng-attr-cx="{{size/2}}" ' +
                         'ng-attr-cy="{{size/2}}" ' +
                         'ng-attr-r="{{radius}}" ' +
-                        'ng-attr-stroke="{{background}}" ' +
-                        'ng-attr-stroke-width="{{strokeWidthCapped}}"' +
+                        'stroke="{{background}}" ' +
+                        'stroke-width="{{strokeWidthCapped}}"' +
                         '/>' +
-                    '<circle class="ngpa-progress" fill="none" ' +
+                    '<circle fill="none" ' +
                         'ng-attr-cx="{{size/2}}" ' +
                         'ng-attr-cy="{{size/2}}" ' +
                         'ng-attr-r="{{radius}}" ' +
-                        'ng-attr-stroke="{{stroke}}" ' +
-                        'ng-attr-stroke-width="{{strokeWidthCapped}}"' +
-                        'ng-attr-stroke-dasharray="{{circumference}}"' +
-                        'ng-attr-stroke-dashoffset="{{(1 - complete()) * circumference}}"' +
+                        'stroke="{{stroke}}" ' +
+                        'stroke-width="{{strokeWidthCapped}}"' +
+                        'stroke-dasharray="{{circumference}}"' +
+                        'stroke-dashoffset="{{(1 - complete()) * circumference}}"' +
                         'ng-attr-transform="rotate({{offset}}, {{size/2}}, {{size/2}})' +
                             '{{ (counterClockwise && counterClockwise != \'false\') ? \' translate(0, \' + size + \') scale(1, -1)\' : \'\' }}"' +
                         '/>' +
diff --git a/angular-progress-arc.min.js b/angular-progress-arc.min.js
index 4ee6724..b70d8f4 100644
--- a/angular-progress-arc.min.js
+++ b/angular-progress-arc.min.js
@@ -1,2 +1,2 @@
 /*! angular-progress-arc - v1.0.0 (http://mathewbyrne.github.io/angular-progress-arc/) */
-!function(a){"use strict";var b=a.module("angular-progress-arc",[]);b.provider("progressArcDefaults",function(){var b={size:200,strokeWidth:20,stroke:"black",background:null};this.setDefault=function(a,c){return b[a]=c,this},this.$get=function(){return function(c){a.forEach(b,function(a,b){c[b]||(c[b]=a)})}}}),b.directive("progressArc",["progressArcDefaults",function(a){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@"},compile:function(b,c){return a(c),function(a){a.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var b=function(){a.strokeWidthCapped=Math.min(a.strokeWidth,a.size/2-1),a.radius=Math.max((a.size-a.strokeWidthCapped)/2-1,0),a.circumference=2*Math.PI*a.radius};a.$watchCollection("[size, strokeWidth]",b),b()}},template:'<svg ng-attr-width="{{size}}" ng-attr-height="{{size}}"><circle fill="none" ng-if="background" ng-attr-cx="{{size/2}}" ng-attr-cy="{{size/2}}" ng-attr-r="{{radius}}" ng-attr-stroke="{{background}}" ng-attr-stroke-width="{{strokeWidthCapped}}"/><circle fill="none" ng-attr-cx="{{size/2}}" ng-attr-cy="{{size/2}}" ng-attr-r="{{radius}}" ng-attr-stroke="{{stroke}}" ng-attr-stroke-width="{{strokeWidthCapped}}"ng-attr-stroke-dasharray="{{circumference}}"ng-attr-stroke-dashoffset="{{(1 - complete()) * circumference}}"ng-attr-transform="rotate({{offset}}, {{size/2}}, {{size/2}})'+"{{ (counterClockwise && counterClockwise != 'false') ? ' translate(0, ' + size + ') scale(1, -1)' : '' }}\"/></svg>"}}])}(window.angular);
\ No newline at end of file
+!function(a){"use strict";a.module("angular-progress-arc",[]).provider("progressArcDefaults",function(){var b={size:200,strokeWidth:20,stroke:"black",background:null};this.setDefault=function(a,c){return b[a]=c,this},this.$get=function(){return function(c){a.forEach(b,function(a,b){c[b]||(c[b]=a)})}}}).directive("progressArc",["progressArcDefaults",function(a){return{restrict:"E",scope:{size:"@",strokeWidth:"@",stroke:"@",counterClockwise:"@",complete:"&",background:"@"},link:function(b,c,d){a(b),b.offset=/firefox/i.test(navigator.userAgent)?-89.9:-90;var e=function(){b.strokeWidthCapped=Math.min(b.strokeWidth,b.size/2-1),b.radius=Math.max((b.size-b.strokeWidthCapped)/2-1,0),b.circumference=2*Math.PI*b.radius};b.$watchCollection("[size, strokeWidth]",e),e()},template:'<svg ng-attr-width="{{size}}" ng-attr-height="{{size}}"><circle fill="none" ng-if="background" ng-attr-cx="{{size/2}}" ng-attr-cy="{{size/2}}" ng-attr-r="{{radius}}" stroke="{{background}}" stroke-width="{{strokeWidthCapped}}"/><circle fill="none" ng-attr-cx="{{size/2}}" ng-attr-cy="{{size/2}}" ng-attr-r="{{radius}}" stroke="{{stroke}}" stroke-width="{{strokeWidthCapped}}"stroke-dasharray="{{circumference}}"stroke-dashoffset="{{(1 - complete()) * circumference}}"ng-attr-transform="rotate({{offset}}, {{size/2}}, {{size/2}})'+"{{ (counterClockwise && counterClockwise != 'false') ? ' translate(0, ' + size + ') scale(1, -1)' : '' }}\"/></svg>"}}])}(window.angular);
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 3949b3c..d42904b 100644
--- a/bower.json
+++ b/bower.json
@@ -27,5 +27,8 @@
   ],
   "dependencies": {
     "angular": ">=1.2.19"
+  },
+  "devDependencies": {
+    "angular-mocks": "^1.5.0"
   }
 }
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 0000000..43d428d
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,54 @@
+module.exports = function(config) {
+  'use strict';
+
+  config.set({
+    basePath: '',
+    files: [
+      'bower-components/angular/angular.js',
+      'bower-components/angular-mocks/angular-mocks.js',
+      'angular-progress-arc.js',
+      'test/**/*.js'
+    ],
+    browsers: [
+      'PhantomJS'
+    ],
+    frameworks: [
+      'jasmine'
+    ],
+    reporters: [
+      'dots',
+      'coverage'
+    ],
+    preprocessors: {
+      'angular-progress-arc.js': ['coverage']
+    },
+    plugins: [
+      'karma-phantomjs-launcher',
+      'karma-coverage',
+      'karma-jasmine',
+      'karma-junit-reporter'
+    ],
+    notifyReporter: {
+      reportEachFailure: true,
+      reportSuccess: false
+    },
+    coverageReporter: {
+      reporters: [
+        {
+          type: 'html',
+          subdir: 'report-html'
+        },
+        {
+          type: 'lcov',
+          subdir: 'report-lcov'
+        },
+        {
+          type: 'text-summary',
+          subdir: 'report-summary',
+          file: 'text-summary.txt'
+        }
+      ]
+    }
+  });
+};
+
diff --git a/package.json b/package.json
index 11fd5d4..0efd350 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,11 @@
   "directories": {
     "example": "example"
   },
+  "scripts": {
+    "pretest": "npm install && node_modules/.bin/bower install --allow-root",
+    "test": "node_modules/karma/bin/karma start karma.conf.js --no-auto-watch --single-run --reporters 'coverage,dots'",
+    "test-watch": "node_modules/karma/bin/karma start karma.conf.js --auto-watch"
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/mathewbyrne/angular-progress-arc.git"
@@ -27,9 +32,14 @@
   },
   "homepage": "http://mathewbyrne.github.io/angular-progress-arc/",
   "devDependencies": {
-      "grunt": "~0.4.5",
-      "grunt-contrib-uglify": "~0.5.0",
-      "grunt-contrib-jshint": "~0.10.0"
+    "bower": "^1.7.7",
+    "grunt": "~0.4.5",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-uglify": "~0.5.0",
+    "karma-coverage": "^0.5.3",
+    "karma-jasmine": "^0.3.7",
+    "karma-junit-reporter": "^0.3.8",
+    "karma-phantomjs-launcher": "^1.0.0"
   },
   "dependencies": {
     "angular": ">=1.2.19"
diff --git a/test/progressArc.js b/test/progressArc.js
new file mode 100644
index 0000000..231dc4a
--- /dev/null
+++ b/test/progressArc.js
@@ -0,0 +1,50 @@
+describe('progressArc', function() {
+    'use strict';
+
+    beforeEach(module('angular-progress-arc'));
+
+    var $compile;
+    var $rootScope;
+    var $httpBackend;
+    beforeEach(inject(function(_$compile_, _$rootScope_, _$httpBackend_){
+        $compile = _$compile_;
+        $rootScope = _$rootScope_;
+        $httpBackend = _$httpBackend_;
+    }));
+
+    afterEach(function() {
+        $httpBackend.verifyNoOutstandingExpectation();
+        $httpBackend.verifyNoOutstandingRequest();
+    });
+
+    it('should inject an svg with the children', function() {
+        var $scope = $rootScope.$new();
+        var element = $compile('<progress-arc></progress-arc>')($scope);
+        $rootScope.$digest();
+        expect(element[0].getElementsByTagName('svg').length).toEqual(1);
+        expect(element[0].getElementsByTagName('circle').length).toEqual(1);
+    });
+
+    it('should display the background circle if the background attr is provided', function() {
+        var $scope = $rootScope.$new();
+        var element = $compile('<progress-arc background="\'black\'"></progress-arc>')($scope);
+        $rootScope.$digest();
+        expect(element[0].getElementsByTagName('svg').length).toEqual(1);
+        expect(element[0].getElementsByTagName('circle').length).toEqual(2);
+    });
+
+    it('should update the stroke-dashoffset when complete is updated', function() {
+        var $scope = $rootScope.$new();
+        $scope.complete = 0.5;
+        var element = $compile('<progress-arc complete="complete"></progress-arc>')($scope);
+        $rootScope.$digest();
+        var circle = angular.element(element[0].getElementsByTagName('circle'));
+        expect(parseFloat(circle.attr('stroke-dashoffset'))).toBeGreaterThan(279.0);
+
+        $scope.complete = 1.0;
+        $rootScope.$digest();
+        circle = angular.element(element[0].getElementsByTagName('circle'));
+        expect(circle.attr('stroke-dashoffset')).toEqual('0');
+    });
+});
+
diff --git a/test/progressArcDefaults.js b/test/progressArcDefaults.js
new file mode 100644
index 0000000..5c7f56a
--- /dev/null
+++ b/test/progressArcDefaults.js
@@ -0,0 +1,14 @@
+describe('progressArcDefaults', function() {
+    'use strict';
+
+    beforeEach(module('angular-progress-arc'));
+
+    it('should set values appropriately', inject(function(progressArcDefaults) {
+        var target = {};
+        progressArcDefaults(target);
+        expect(target.size).toEqual(200);
+        expect(target.strokeWidth).toEqual(20);
+        expect(target.stroke).toEqual('black');
+        expect(target.background).toBeNull();
+    }));
+});