title: how to generalize bootstrap toggle selection with Angular
body: <p>I am using bootstrap toggle and handling selection in a function. In my application there will be many toggle groups. 
  I would like to remove duplication of code and have a common service/factory which will handle toggle selection for <code>n</code> number of toggle.</p>
  
  <p>Here is link to my <a href="https://plnkr.co/edit/MAhMxtUit38AjUNhxfb7?p=preview" rel="nofollow noreferrer">PLUNKER</a>.</p>
  
  <p><a href="https://i.stack.imgur.com/gZqoP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gZqoP.png" alt="enter image description here"></a></p>
  
  <p>You may ask what is the need to handle selection? because based on toggle selection there will be changes in DOM. Some fields may hide/show based on selection.</p>
  
  <p><em>Please don't refer to any third party library, help me in understanding the logic, How this can be done.</em></p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="form-group" style="height: 50px;"&gt;
      &lt;label class="control-label col-md-4 col-sm-4 col-xs-4"&gt;NUMERIC VALUE&lt;/label&gt;
  
      &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
        &lt;div class="btn-group"&gt;
          &lt;button type="button" class="btn btn-toggle" value="111" ng-class="{active: vm.sharedService.numericValue === '111'}" ng-click="vm.selectNumericValue('111')"&gt;
            111
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-toggle" value="222" ng-class="{active: vm.sharedService.numericValue === '222'}" ng-click="vm.selectNumericValue('222')"&gt;
            222
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="control-label col-md-4 col-sm-4 col-xs-4"&gt;ALPHABETICAL VALUE&lt;/label&gt;
  
      &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
        &lt;div class="btn-group"&gt;
          &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'AAA'}" ng-click="vm.selectAlphaValue('AAA')"&gt;
            AAA
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'BBB'}" ng-click="vm.selectAlphaValue('BBB')"&gt;
            BBB
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.alphaValue === 'CCC'}" ng-click="vm.selectAlphaValue('CCC')"&gt;
            CCC
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label class="control-label col-md-4 col-sm-4 col-xs-4"&gt;Mix VALUE&lt;/label&gt;
  
      &lt;div class="col-md-6 col-sm-6 col-xs-6"&gt;
        &lt;div class="btn-group"&gt;
          &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'A1'}" ng-click="vm.selectMixValue('A1')"&gt;
            A1
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'B1'}" ng-click="vm.selectMixValue('B1')"&gt;
            B1
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'C1'}" ng-click="vm.selectMixValue('C1')"&gt;
            C1
          &lt;/button&gt;
          &lt;button type="button" class="btn btn-toggle" ng-class="{active: vm.sharedService.mixValue === 'D1'}" ng-click="vm.selectMixValue('D1')"&gt;
            D1
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code> function selectNumericValue(numValue) {
      vm.sharedService.numericValue = numValue;
    }
  
  
    function selectAlphaValue(alphaValue) {
      vm.sharedService.alphaValue = alphaValue;
    }
  
    function selectMixValue(mixValue) {
      vm.sharedService.mixValue = mixValue;
    }
  </code></pre>