angular.module("ngJustGage", [])
  .directive('justGage', ['$timeout', function ($timeout) {
    return {
      restrict: 'EA',
      scope: {
        id: '@',
        class: '@',
        min: '=',
        max: '=',
        title: '@',
        value: '='
      },
      template: '<div id="{{id}}-justgage" class="{{class}}"></div>',
      link: function (scope) {
        $timeout(function () {
          var graph = new JustGage({
            id: scope.id + '-justgage',
            min: scope.min,
            max: scope.max,
            title: scope.title,
            value: scope.value
          });

          scope.$watch('max', function (updatedMax) {
            if (updatedMax) {
              graph.refresh(scope.value, updatedMax);
            }
          }, true);

          scope.$watch('value', function (updatedValue) {
            if (updatedValue) {
              graph.refresh(updatedValue);
            }
          }, true);
        });
      }
    };
  }]);

angular.module("ngJustGage", [])
  .directive('justGage', ['$timeout', function ($timeout) {
    return {
      restrict: 'EA',
      scope: {
        id: '@',
        class: '@',
        min: '=',
        max: '=',
        title: '@',
        value: '=',
        options: '='
      },
      template: '<div id="{{id}}-justgage" class="{{class}}"></div>',
      link: function (scope,element,attrs) {
        $timeout(function () {
          var options = {
            id: scope.id + '-justgage',
            min: scope.min,
            max: scope.max,
            title: scope.title,
            value: scope.value
          }
          if ( scope.options ) {
              for (var key in scope.options) {
                  options[key]=scope.options[key];
              }
          }
          var graph = new JustGage(options);

          scope.$watch('max', function (updatedMax) {
            if (updatedMax) {
              graph.refresh(scope.value, updatedMax);
            }
          }, true);

          scope.$watch('value', function (updatedValue) {
            if (updatedValue) {
              graph.refresh(updatedValue);
            }
          }, true);
        });
      }
    };
  }]);

Add options attribute to pass a complete options list to directive
Add options attribute to pass a complete options list to directive

The option attribute must contains an object with the additional options
you want to pass to the justgage object. Normal option are still use but
will be overload by object if declared twice.

Here's a sample to use levelColors and levelGradiant.
All justgage option are now available for the directive.

        <just-gage
            id="demo"
            class=""
            min=0 max=100 value="92"
            title="Demo"
            options="{
                levelColors: ['#CE1B21', '#D0532A', '#FFC414', '#85A137']
                ,levelGradiant: false
            }
            ">
        </just-gage>
