title: AngularJS case-insensitive binding to a dynamic select dropdown without changing the ng-bind value to lower or upper case
body: <p>I am trying to perform a case-insensitive bind of an ng-model to a dynamic select drop-down using AngularJS.</p>
  
  <p>by going through various other relavent answers from stack over flow, i have come up with something like below on the view , here caseinsensitive-options  is an directive which i have come up with referencing the following solution</p>
  
  <p><a href="https://stackoverflow.com/questions/38343966/angularjs-case-insensitive-binding-to-a-static-select-drop-down">AngularJS case-insensitive binding to a static select drop-down</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;select id="dcName" caseinsensitive-options="" ng-model="DC.name" class="form-control"&gt;
    &lt;option value=""&gt;--- Please Select ---&lt;/option&gt;
    &lt;option ng-repeat="dataCenter in inventoryDataCenters" value="{{dataCenter}}"&gt;{{dataCenter}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>js directive code : </p>
  
  <pre><code>app.directive('caseinsensitiveOptions', function() {
      return {
          restrict: 'A',
          require: ['ngModel', 'select'],
          link: function(scope, el, attrs, ctrls) {
            var ngModel = ctrls[0];
            ngModel.$formatters.push(function(value) {
              var option = [].filter.call(el.children(), function(option) {
                return option.value.toUpperCase() === value.toUpperCase()
              })[0];
              return option ? option.value : value
            });
  
          }
        }
      });
  </code></pre>
  
  <p>The expected result  is </p>
  
  <p>when i pass something like this for 
  $scope.inventoryDataCenters = ["TEST1","test2",teST3]; and ng-model for DC.name has value TesT1. </p>
  
  <p>The drop down should show TEST1 by doing case insensitive binding.  That doesnt happen now. The above solution works perfect when we have static drop down.</p>
  
  <p>things to be considered is that the select is inside a div which ng-repeat as shown below</p>
  
  <pre><code>ng-repeat="DC in workflowData.project_data.service_info.variables.service_data['data-center']" 
  </code></pre>
  
  <p>and ng-model for select DC.name is derived from the above array DC.</p>