var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Electronics Calculator - Resistor color code</title>

    <!-- Bootstrap core CSS -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">

    <!-- Custom styles  -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,600,300|Open+Sans+Condensed:300,700|Ubuntu+Mono:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  </head>

  <body>

<!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <p class="navbar-brand">Calculator</p>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Resistor Color Bands</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container theme-showcase" role="main" ng-app ng-controller="ResistorController">
      <form name="colors" class="form-horizontal" role="form">
        <ul class="nav nav-pills">
          <li ng-class="{'active': bandNumber == 3 }"><a href="#three" ng-click="setBands(3)">3 Bands</a></li>
          <li ng-class="{'active': bandNumber == 4 }"><a href="#four" ng-click="setBands(4)">4 Bands</a></li>
          <li ng-class="{'active': bandNumber == 5 }"><a href="#five" ng-click="setBands(5)">5 Bands</a></li>
          <li ng-class="{'active': bandNumber == 6 }"><a href="#six" ng-click="setBands(6)">6 Bands</a></li>
        </ul>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="721.20178" height="162.18156" id="resistor">
  <defs id="defs3211">
    <linearGradient x1="689.05829" y1="857.93304" x2="689.05829" y2="887.09424" id="linearGradient4258" xlink:href="#linearGradient3840" gradientUnits="userSpaceOnUse"
      gradientTransform="translate(19.943936,121.5263)" />
    <linearGradient id="linearGradient3840">
      <stop id="stop3842" style="stop-color:#4d4d4d;stop-opacity:1" offset="0" />
      <stop id="stop3848" style="stop-color:#ffffff;stop-opacity:1" offset="0.5" />
      <stop id="stop3844" style="stop-color:#171717;stop-opacity:1" offset="1" />
    </linearGradient>
    <linearGradient x1="728.47137" y1="917.27405" x2="727.05823" y2="1078.7909" id="linearGradient4260" xlink:href="#linearGradient4136" gradientUnits="userSpaceOnUse" />
    <linearGradient id="linearGradient4136">
      <stop id="stop4138" style="stop-color:#375e81;stop-opacity:1" offset="0" />
      <stop id="stop4144" style="stop-color:#375e81;stop-opacity:1" offset="0.62499046" />
      <stop id="stop4140" style="stop-color:#14222f;stop-opacity:1" offset="1" />
    </linearGradient>
    <linearGradient x1="490.5" y1="874.64062" x2="501.125" y2="874.64062" id="linearGradient4262" xlink:href="#linearGradient3861" gradientUnits="userSpaceOnUse"
      gradientTransform="translate(19.943936,121.5263)" />
    <linearGradient id="linearGradient3861">
      <stop id="stop3863" style="stop-color:#000000;stop-opacity:0.69999999" offset="0" />
      <stop id="stop3865" style="stop-color:#000000;stop-opacity:0" offset="1" />
    </linearGradient>
    <linearGradient x1="931.31293" y1="872.96033" x2="919.40393" y2="872.96033" id="linearGradient4264" xlink:href="#linearGradient3861" gradientUnits="userSpaceOnUse"
      gradientTransform="translate(19.943936,121.5263)" />
    <linearGradient id="linearGradient3177">
      <stop id="stop3179" style="stop-color:#000000;stop-opacity:0.69999999" offset="0" />
      <stop id="stop3181" style="stop-color:#000000;stop-opacity:0" offset="1" />
    </linearGradient>
    <filter color-interpolation-filters="sRGB" id="filter3921">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="result6" id="feGaussianBlur3923" />
      <feColorMatrix in="SourceGraphic" result="result7" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 " id="feColorMatrix3925" />
      <feComposite in2="result7" operator="in" in="result6" id="feComposite3927" />
    </filter>
    <filter color-interpolation-filters="sRGB" id="filter3929">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="result6" id="feGaussianBlur3931" />
      <feColorMatrix in="SourceGraphic" result="result7" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 " id="feColorMatrix3933" />
      <feComposite in2="result7" operator="in" in="result6" id="feComposite3935" />
    </filter>
    <filter color-interpolation-filters="sRGB" id="filter3937">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="result6" id="feGaussianBlur3939" />
      <feColorMatrix in="SourceGraphic" result="result7" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0 " id="feColorMatrix3941" />
      <feComposite in2="result7" operator="in" in="result6" id="feComposite3943" />
    </filter>
    <linearGradient x1="931.31293" y1="872.96033" x2="919.40393" y2="872.96033" id="linearGradient3315" xlink:href="#linearGradient3861" gradientUnits="userSpaceOnUse"
      gradientTransform="translate(-201.98142,-538.26143)" />
    <linearGradient x1="490.5" y1="874.64062" x2="501.125" y2="874.64062" id="linearGradient3318" xlink:href="#linearGradient3861" gradientUnits="userSpaceOnUse"
      gradientTransform="translate(-201.98142,-538.26143)" />
    <linearGradient x1="728.47137" y1="917.27405" x2="727.05823" y2="1078.7909" id="linearGradient3327" xlink:href="#linearGradient4136" gradientUnits="userSpaceOnUse"
      gradientTransform="translate(-221.92536,-659.78773)" />
    <linearGradient x1="689.05829" y1="857.93304" x2="689.05829" y2="887.09424" id="linearGradient3330" xlink:href="#linearGradient3840" gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(0.42363563,0,0,1,205.16562,-538.26143)" />
  </defs>
  <metadata id="metadata3215">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g transform="translate(-143.82334,-255.31837)" id="layer1">
    <path d="m 143.82334,322.64639 721.20176,0 0,27.84778 -721.20176,0 z" id="path4081" style="fill:url(#linearGradient3330);stroke:none" />
    <path
      d="m 349.89358,255.33229 c -35.69251,0.6523 -49.52282,24.6723 -59.96875,54.75 -2.51391,7.2385 -9.22074,12.1553 -18.3125,12.25 l 0,7 0,14.15618 0,7 c 9.09176,0.095 15.7986,4.9803 18.3125,12.2188 12.38037,35.6476 29.50953,62.8253 82.15625,52.625 22.63595,-4.3857 43.04841,-17.2932 66.0625,-17.0625 28.72838,0.288 56.40593,6.0192 83.5,3.8437 31.16479,-2.5022 61.40232,-12.6741 92.09375,-1.9687 48.33263,16.8588 89.85057,16.4687 111.4375,-30.2813 4.36241,-9.4475 7.13491,-20.2492 18.5625,-19.375 l 0,-7 0,-14.15618 0,-7 c -11.42759,0.8742 -14.20009,-9.9275 -18.5625,-19.375 -21.58693,-46.75 -63.10487,-47.1401 -111.4375,-30.2813 -30.69143,10.7055 -60.92896,0.5336 -92.09375,-1.9687 -27.09407,-2.1754 -54.77162,3.5245 -83.5,3.8125 -23.01409,0.2307 -43.42655,-12.6456 -66.0625,-17.0313 -8.22605,-1.5937 -15.57778,-2.277 -22.1875,-2.1562 z"
      id="path4083" style="fill:url(#linearGradient3327);fill-opacity:1;stroke:none" />
    <path id="band1"
      d="m 349.89358,255.33229 c -0.563,0.01 -1.10406,0.041 -1.65625,0.062 l 0,162.03118 c 6.89365,0.2738 14.60425,-0.3474 23.3125,-2 l 0,-158.03118 c -8.00879,-1.52 -15.19109,-2.1807 -21.65625,-2.0625 z"
      style="fill:#361e1a;fill-opacity:1;stroke:none" />
    <path id="band2"
      d="m 454.92483,273.80099 c -5.55398,0.3723 -11.15004,0.6623 -16.78125,0.7188 -2.1993,0.022 -4.37526,-0.051 -6.53125,-0.25 l 0,124.24998 c 2.15599,-0.199 4.33195,-0.2721 6.53125,-0.25 5.63121,0.056 11.22727,0.3446 16.78125,0.7187 l 0,-125.18748 z"
      style="fill:#361e1a;fill-opacity:1;stroke:none" />
    <path id="band3"
      d="m 509.11233,270.23849 0,132.34378 c 4.19039,-0.01 8.37008,-0.1346 12.53125,-0.4688 3.60276,-0.2892 7.20114,-0.706 10.78125,-1.1562 l 0,-129.09378 c -3.58011,-0.4501 -7.17849,-0.8669 -10.78125,-1.1562 -4.16117,-0.3341 -8.34086,-0.458 -12.53125,-0.4688 z"
      style="fill:#361e1a;fill-opacity:1;stroke:none" />
    <path id="band4" d="m 602.23715,275.77649 c -7.56674,1.467 -15.10302,1.8746 -22.65625,1.6563 l 0,117.96868 c 7.55326,-0.2182 15.08948,0.1894 22.65625,1.6563 l 0,-121.28128 z"
      style="fill:#1b2b52;fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path id="band5"
      d="m 660.64358,262.58229 c -7.42224,0.2751 -15.22691,1.4087 -23.28125,3.2187 l 0,141.21878 c 8.06576,1.8126 15.88074,2.9457 23.3125,3.2187 l 0,-147.65618 c -0.0105,4e-4 -0.0207,-4e-4 -0.0312,0 z"
      style="fill:#531c25;fill-opacity:1;stroke:none" />
    <!--path d="m 494.87291,270.65857 c -7.49711,0.46767 -15.03908,1.16926 -22.65625,1.84375 l 0,127.59375 c 7.61692,0.67846 15.15938,1.37221 22.65625,1.84375 l 0,-131.28125 z" id="band6" 
      style="fill:#531c25;fill-opacity:1;fill-rule:nonzero;stroke:none"/ -->
    <path
      d="m 664.11233,268.48849 c -23.45515,-0.4143 -44.95667,10.5363 -67.6875,14.2188 -35.81549,3.9495 -70.78736,-10.4938 -106.625,-5.8125 -28.37449,2.2281 -58.52817,8.0266 -85.6875,-3.1563 -17.15537,-5.8314 -34.53145,-12.9397 -52.9375,-12.4375 -1.29499,-0.087 -2.59455,-0.1252 -3.875,-0.094 -19.2067,0.4732 -36.49944,17.0051 -43.6875,34.2657 13.2369,-15.9618 23.30075,-26.2769 44.75,-26.2969 0.92063,-0.032 1.83246,-0.035 2.75,-0.031 13.76305,0.06 27.19183,4.0191 40.0625,8.5 25.93734,12.2904 55.77259,12.0737 83.875,8.8125 30.45336,-5.9441 61.35379,0.6806 91.6875,4 23.42904,4.2905 46.71303,-3.2492 69.0625,-9.5625 19.58388,-6.3266 52.26536,-4.5942 69.45312,8.7031 -16.84923,-16.9259 -22.1382,-19.5165 -41.14062,-21.1095 z"
      id="path4095" style="fill:#ffffff;fill-opacity:0.20318723;stroke:none" />
    <path
      d="m 298.39358,289.48849 c -3.20084,6.3422 -5.93183,13.2891 -8.46875,20.5938 -0.18885,0.5438 -0.42085,1.0772 -0.65625,1.5937 l 0,49.43748 c 0.2354,0.5162 0.4674,1.05 0.65625,1.5938 2.53386,7.2959 5.27326,14.224 8.46875,20.5625 l 0,-93.78128 z"
      id="path4097" style="fill:url(#linearGradient3318);stroke:none" />
    <path
      d="m 717.23733,289.01979 0,94.78118 c 2.88112,-4.0973 5.53287,-8.7298 7.9375,-13.9375 1.35323,-2.9306 2.55319,-5.9789 3.90625,-8.7812 l 0,-49.34378 c -1.35306,-2.8023 -2.55302,-5.8506 -3.90625,-8.7812 -2.40463,-5.2076 -5.05638,-9.8402 -7.9375,-13.9375 z"
      id="path4099" style="fill:url(#linearGradient3315);stroke:none" />
    <rect width="178.94153" height="19.817629" ry="9.9088144" x="408.86792" y="321.46173" id="rect4101" style="fill:#ffffff;fill-opacity:0.7;stroke:none;filter:url(#filter3921)" />
    <rect width="24.480595" height="19.817629" ry="9.9088144" x="339.50623" y="321.46173" id="rect4103" style="fill:#ffffff;fill-opacity:0.7;stroke:none;filter:url(#filter3929)" />
    <rect width="24.480595" height="19.817629" ry="9.9088144" x="650.75958" y="321.46173" id="rect4105" style="fill:#ffffff;fill-opacity:0.7;stroke:none;filter:url(#filter3937)" />

    <text ng-show="calculateValue() != undefined" x="506.88187" y="355.4816" id="text4233" xml:space="preserve"
      style="font-size:56px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:0.50196078;stroke:#ffffff;stroke-width:1.0629921;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Consolas;-inkscape-font-specification:Consolas"><tspan x="506.88187" y="355.4816" id="tspan4235">{{findScale(calculateValue())}}Ω</tspan></text>
    <text x="507.3848" y="374.92899" id="text4241" xml:space="preserve"
      style="font-size:56px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:0.50196078;stroke:#ffffff;stroke-width:0.70866144;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;font-family:Consolas;-inkscape-font-specification:Consolas"><tspan ng-show="bandNumber > 3 && calculateTolerance() != undefined" x="507.3848" y="374.92899" id="tspan4243"
      style="font-size:22px;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:0.50196078;stroke:#ffffff;stroke-width:0.70866144;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none">±{{calculateTolerance()}}% <tspan ng-show="bandNumber == 6 && calculateTemperature() != undefined" id="tspan4251" style="font-weight:bold;-inkscape-font-specification:Consolas Bold">{{calculateTemperature()}}ppm/K°</tspan></tspan></text>



    </text>

  </g>
</svg>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="three">
            <div class="form-group">
              <label for="band1" class="col-sm-2 control-label">1st Band</label>
                <div class="btn-group">
                  <button name="band1" type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:{{bands[1].foreground}}; background:{{bands[1].background}}">{{bands[1].name}} <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li ng-click="set(1, band)" ng-repeat="band in bandColors | filter:isValueBand" role="presentation" style="background:{{band.color}}"><a role="menuitem" tabindex="-1" href="#" style="color:{{band.text}}">{{band.name}}</a></li>
                  </ul>
                </div>
            </div>
            <div class="form-group">
              <label for="band2" class="col-sm-2 control-label">2nd Band</label>
                <div class="btn-group">
                  <button name="band2" type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:{{bands[2].foreground}}; background:{{bands[2].background}}">{{bands[2].name}} <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li ng-click="set(2, band)" ng-repeat="band in bandColors | filter:isValueBand" role="presentation" style="background:{{band.color}}"><a role="menuitem" tabindex="-1" href="#" style="color:{{band.text}}">{{band.name}}</a></li>
                  </ul>
                </div>
            </div>
            <div class="form-group">
              <label for="band3" class="col-sm-2 control-label">3rd Band</label>
                <div class="btn-group">
                  <button name="band3" type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:{{bands[3].foreground}}; background:{{bands[3].background}}">{{bands[3].name}} <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li ng-click="set(3, band)" ng-repeat="band in bandColors | filter:isValueBand" role="presentation" style="background:{{band.color}}"><a role="menuitem" tabindex="-1" href="#" style="color:{{band.text}}">{{band.name}}</a></li>
                  </ul>
                </div>
            </div>
            <div class="form-group" ng-show="bandNumber > 3">
              <label for="band4" class="col-sm-2 control-label">4th Band</label>
                <div class="btn-group">
                  <button name="band4" type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:{{bands.4.foreground}}; background:{{bands.4.background}}">{{bands.4.name}} <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li ng-click="set(4, band)" ng-repeat="band in bandColors | filter:isValueOrToleranceBand" role="presentation" style="background:{{band.color}}"><a role="menuitem" tabindex="-1" href="#" style="color:{{band.text}}">{{band.name}}</a></li>
                  </ul>
                </div>
            </div>
            <div class="form-group" ng-show="bandNumber > 4">
              <label for="band5" class="col-sm-2 control-label">5th Band</label>
                <div class="btn-group">
                  <button name="band5" type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:{{bands.5.foreground}}; background:{{bands.5.background}}">{{bands.5.name}} <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li ng-click="set(5, band)" ng-repeat="band in bandColors | filter:isToleranceBand" role="presentation" style="background:{{band.color}}"><a role="menuitem" tabindex="-1" href="#" style="color:{{band.text}}">{{band.name}}</a></li>
                  </ul>
                </div>
            </div>
            <div class="form-group" ng-show="bandNumber > 5">
              <label for="band6" class="col-sm-2 control-label">6th Band</label>
                <div class="btn-group">
                  <button name="band6" type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="color:{{bands.6.foreground}}; background:{{bands.6.background}}">{{bands.6.name}} <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li ng-click="set(6, band)" ng-repeat="band in bandColors | filter:isTemperatureBand" role="presentation" style="background:{{band.color}}"><a role="menuitem" tabindex="-1" href="#" style="color:{{band.text}}">{{band.name}}</a></li>
                  </ul>
                </div>
            </div>
          </div>
        </div>

        <script>
        function ResistorController($scope) {

          $scope.setBands = function(i) {
            $scope.bandNumber = i;
            for (i = 1; i < 6; i++) {
              var svgId = 'band';
              if ($scope.bandNumber == 4)
                switch(i) {
                  case 4:
                    svgId += '5';break
                  case 5:
                    svgId += '4';break
                  default:
                    svgId += i;
                }
              else
                svgId += i
              eval(svgId + '.style.display="' + (i <= $scope.bandNumber ? '' : 'none') + '";' + svgId + '.style.fill="' + ($scope.bands[i] != undefined  && $scope.bands[i].background != undefined ? $scope.bands[i].background : 'grey') + '"');
            }
          }

          $scope.bands = [];
          $scope.setBands(4);

          for (i = 1; i < 7; i++)
            $scope.bands[i] = { name: "Select", value: 0 };

          $scope.set = function(i, value) { 
            $scope.bands[i].name = value.name;
            $scope.bands[i].background = value.color;
            $scope.bands[i].foreground = value.text;
            $scope.bands[i].ref = value;
            var svgId = 'band';
            if ($scope.bandNumber == 4)
              switch(i) {
                case 4:
                  svgId += '5';break
                case 5:
                  svgId += '4';break
                default:
                  svgId += i;
              }
            else
              svgId += i
            eval(svgId  + '.style.display="";' + svgId + '.style.fill="' + value.color + '"');
          };

          $scope.isValueBand = function(band) {
            return band.value >= 0;
          }
          $scope.isValueOrToleranceBand = function(band) {
            if ($scope.bandNumber < 5)
              return !isNaN(band.tolerance);
            else 
              return band.value >= 0;
          }
          $scope.isToleranceBand = function(band) {
            return !isNaN(band.tolerance);
          }
          $scope.isTemperatureBand = function(band) {
            return !isNaN(band.temp);
          }


          $scope.calculateValue = function() {
            try {
              if ($scope.bandNumber < 5)
                return (($scope.bands[1].ref.value * 10) + $scope.bands[2].ref.value) * Math.pow(10, $scope.bands[3].ref.value);
              else
                return (($scope.bands[1].ref.value * 100) + ($scope.bands[2].ref.value * 10) + $scope.bands[3].ref.value) * Math.pow(10, $scope.bands[4].ref.value);
            } catch (e) {
              console.log(e);
            }
          }
          $scope.calculateTolerance = function() {
            try {
              var tolerance = NaN;
              if ($scope.bandNumber == 4)
                tolerance = $scope.bands[4].ref.tolerance;
              else if ($scope.bandNumber > 4)
                tolerance = $scope.bands[5].ref.tolerance;
              return isNaN(tolerance) ? undefined : tolerance;
            } catch (e) {
              console.log(e);
            }
          }
          $scope.calculateTemperature = function() {
            if ($scope.bandNumber == 6)
              return $scope.bands[6].ref.temp;
            else
              return undefined;
          }
          $scope.findScale = function(value, scale) {
            if (scale == undefined)
              scale = 8;
            if (value >= 1000) {
              // search upward
              return $scope.findScale(value / 1000, scale - 1);
            } else if ( value < 1) {
              // search downward
              return $scope.findScale(value * 1000, scale + 1);
            } else {
              // right scale
              return +value.toFixed(2) + $scope.prefixes[scale].symbol;
            }
          } 

        $scope.bandColors = [
          { name: "Black",  value:  0, tolerance:  NaN, temp: NaN, color: "black",   text: "white" },
          { name: "Brown",  value:  1, tolerance:  1.0, temp: 100, color: "#583030", text: "white" },
          { name: "Red",    value:  2, tolerance:  2.0, temp:  50, color: "#831119", text: "white" },
          { name: "Orange", value:  3, tolerance:  NaN, temp:  15, color: "orange",  text: "black" },
          { name: "Yellow", value:  4, tolerance:  NaN, temp:  25, color: "yellow",  text: "black" },
          { name: "Green",  value:  5, tolerance: 0.50, temp: NaN, color: "green",   text: "white" },
          { name: "Blue",   value:  6, tolerance: 0.25, temp: NaN, color: "#1b2b52", text: "white" },
          { name: "Purple", value:  7, tolerance: 0.10, temp: NaN, color: "#531c25", text: "white" },
          { name: "Gray",   value:  8, tolerance:  NaN, temp: NaN, color: "gray",    text: "white" },
          { name: "White",  value:  9, tolerance:  NaN, temp: NaN, color: "white",   text: "black" },
          { name: "Gold",   value: -1, tolerance:  5.0, temp: NaN, color: "gold",    text: "black" },
          { name: "Silver", value: -2, tolerance: 10.0, temp: NaN, color: "silver",  text: "black" }
        ];

        $scope.prefixes = [
          { name: "yotta", symbol: 'Y', exponent:  24 },
          { name: "zetta", symbol: 'Z', exponent:  21 },
          { name: "exa",   symbol: 'E', exponent:  18 },
          { name: "peta",  symbol: 'P', exponent:  15 },
          { name: "tera",  symbol: 'T', exponent:  12 },
          { name: "giga",  symbol: 'G', exponent:   9 },
          { name: "mega",  symbol: 'M', exponent:   6 },
          { name: "kilo",  symbol: 'k', exponent:   3 },
          { name: "",      symbol: ' ', exponent:   0 },
          { name: "milli", symbol: 'm', exponent:  -3 },
          { name: "micro", symbol: 'µ', exponent:  -6, alt: "u" },
          { name: "nano",  symbol: 'n', exponent:  -9 },
          { name: "pico",  symbol: 'P', exponent: -12 },
          { name: "femto", symbol: 'f', exponent: -15 },
          { name: "atto",  symbol: 'a', exponent: -18 },
          { name: "zepto", symbol: 'z', exponent: -21 },
          { name: "yocto", symbol: 'y', exponent: -24 }
        ]
      }

      unit = {
        value: 0.0,
        symbol: '',
        prefix: undefined,
        prefixes: [
          { name: "yotta", symbol: 'Y', exponent:  24 },
          { name: "zetta", symbol: 'Z', exponent:  21 },
          { name: "exa",   symbol: 'E', exponent:  18 },
          { name: "peta",  symbol: 'P', exponent:  15 },
          { name: "tera",  symbol: 'T', exponent:  12 },
          { name: "giga",  symbol: 'G', exponent:   9 },
          { name: "mega",  symbol: 'M', exponent:   6 },
          { name: "kilo",  symbol: 'k', exponent:   3 },
          { name: "",      symbol: '', exponent:   0 },
          { name: "milli", symbol: 'm', exponent:  -3 },
          { name: "micro", symbol: 'µ', exponent:  -6, alt: "u" },
          { name: "nano",  symbol: 'n', exponent:  -9 },
          { name: "pico",  symbol: 'P', exponent: -12 },
          { name: "femto", symbol: 'f', exponent: -15 },
          { name: "atto",  symbol: 'a', exponent: -18 },
          { name: "zepto", symbol: 'z', exponent: -21 },
          { name: "yocto", symbol: 'y', exponent: -24 }
        ],
        autoscale: function() {
          if (prefix != undefined) {
            
          }
          scale = 8;
          while(true) {
            if (this.value >= 1000) {
              // search upward
              this.value /= 1000; 
              scale--;
            } else if (this.value < 1) {
              // search downward
              this.value *= 1000;
              scale++;
            } else {
              break;
            }
          }
        },
        parse: function(value) {
          parts = value.match(/^(\d+(?:\.\d*)?)\s*(\D)?$/);
          if (parts != null) {
            this.value = parts[1];
            for (i = 0; i < prefixes.length; i++)
              if (parts[2] == prefixes[i].symbol || parts[2] == prefixes[i].alt)
                this.prefix = prefixes[i];
          }
        }
      }
        </script>
      </form>
      <input type="button" ng-click="reset()" value="Reset" class="btn btn-lg"/> 
    </div> <!-- /container -->

    <div id="footer">
      <hr/>
      <div class="container">
        <p class="text-muted">&copy; Roberto Lo Giacco</p>
      </div>
    </div>

    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="js/resistor.js"></script>
  </body>
</html>
body {
  font-family: 'Open Sans', serif;

  padding-top: 70px;
  padding-bottom: 30px;
}

.navbar {
  font-family: 'Open Sans', sans-serif;
}

.navbar-brand {
  font-family: 'Open Sans Condensed', sans-serif;
}

.navbar-nav {
  font-weight: 700;
}

.jumbotron {
  margin-top: -50px;
  font-family: 'Open Sans Condensed', sans-serif;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}